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

* fix alignment of Layout

* fix layout algorithm of the main area

* update changelog

* fix changelog

CHANGELOG.md

@@ -17,20 +17,19 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
-### Features
-- Expose `renderItem` and `renderSelectedItem` callbacks API for `Dropdown` @layershifter ([#746](https://github.com/stardust-ui/react/pull/746))
-
 ### Fixes
 - Fix focus outline visible only during keyboard navigation in `ListItem` @layershifter ([#727](https://github.com/stardust-ui/react/pull/727))
 - Pass `jest --detectLeaks` tests @miroslavstastny ([#718](https://github.com/stardust-ui/react/pull/718))
 - 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))
 - Add and export 'missed call' icon in Teams theme @codepretty ([#748](https://github.com/stardust-ui/react/pull/748))
 - Add `Indicator` component and used it in `MenuItem` and `AccordionTitle` @mnajdova ([#721](https://github.com/stardust-ui/react/pull/721))
+- Expose `renderItem` and `renderSelectedItem` callbacks API for `Dropdown` @layershifter ([#746](https://github.com/stardust-ui/react/pull/746))
 
 <!--------------------------------[ v0.17.0 ]------------------------------- -->
 ## [v0.17.0](https://github.com/stardust-ui/react/tree/v0.17.0) (2019-01-17)

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,
   }),
 }