fix(component): correct preview pane size

meetalva · Dec 11, 2017 · 1adcfb1 · 1adcfb1
1 parent 748d826
commit 1adcfb1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/component/app.tsx b/src/component/app.tsx
@@ -28,6 +28,12 @@ injectGlobal`
 	}
 `;
 
+const MainArea = styledComponents(Layout)`
+	box-sizing: border-box;
+	height: 100vh;
+	padding-top: 38px;
+`;
+
 const ElementPane = styledComponents(Layout)`
 	flex-basis: 350px;
 `;
@@ -90,7 +96,7 @@ class App extends React.Component<AppProps> {
 		return (
 			<Layout directionVertical>
 				<Chrome title={title} />
-				<Layout>
+				<MainArea>
 					<Layout directionVertical hasMargins>
 						<ProjectsPane>
 							<ProjectList store={this.props.store} />
@@ -137,7 +143,7 @@ class App extends React.Component<AppProps> {
 					</ElementPane>
 
 					<IconRegistry names={IconName} />
-				</Layout>
+				</MainArea>
 				<DevTools />
 			</Layout>
 		);

diff --git a/src/lsg/patterns/chrome/index.tsx b/src/lsg/patterns/chrome/index.tsx
@@ -12,8 +12,11 @@ const StyledChrome = styled(Space).attrs({
 	size: Size.XS,
 	sizeLeft: Size.XXL * 3,
 	inside: true
-}) `
+})`
+	position: absolute;
+	top: 0;
 	display: flex;
+	width: 100%;
 	align-items: center;
 	font-family: ${fonts().NORMAL_FONT};
 	height: 38px;