fix(Layout): 'start' and 'main' areas content alignment

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix Avatar's size example @mnajdova ([#745](https://github.com/stardust-ui/react/pull/745))
 - Fix teams theme `Status` and `Chat.Message` styles ([#747](https://github.com/stardust-ui/react/pull/747))
 - Fix `Popup` - do not stop event propagation when pressing Esc on trigger element @sophieH29 ([#750](https://github.com/stardust-ui/react/pull/750))
+- Fix alignment of `Layout`'s `main` area @kuzhelov ([#752](https://github.com/stardust-ui/react/pull/752))
 
 ### Features
 - Rename `Slot` component to `Box` and export it @Bugaa92 ([#713](https://github.com/stardust-ui/react/pull/713))

src/themes/teams/components/Layout/layoutStyles.ts

@@ -53,23 +53,25 @@ const layoutStyles: ComponentSlotStylesInput = {
 
   start: ({ props }): ICSSInJSStyle => ({
     ...(props.debug && debugArea()),
-    ...(props.truncateStart && truncateStyle),
     display: 'inline-flex',
     alignItems: 'center',
+    ...(props.truncateStart && truncateStyle),
     ...props.startCSS,
   }),
 
   main: ({ props }): ICSSInJSStyle => ({
     ...(props.debug && debugArea()),
+    display: 'grid',
+    alignItems: 'center',
     ...(props.truncateMain && truncateStyle),
     ...props.mainCSS,
   }),
 
   end: ({ props }): ICSSInJSStyle => ({
     ...(props.debug && debugArea()),
-    ...(props.truncateEnd && truncateStyle),
     display: 'inline-flex',
     alignItems: 'center',
+    ...(props.truncateEnd && truncateStyle),
     ...props.endCSS,
   }),
 }