Fix sidebar (and content) height

Summary: When expanding the sidebar, sometimes the sign in / profile button would disappear, as the main content would be to height

Reviewed By: passy

Differential Revision: D20534482

fbshipit-source-id: 6248df501afcefc4afb6df3a6fd864462f8290e4

desktop/src/App.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {FlexColumn, FlexRow} from 'flipper';
+import {FlexColumn, FlexRow, styled} from 'flipper';
 import {connect} from 'react-redux';
 import TitleBar from './chrome/TitleBar';
 import MainSidebar2 from './chrome/mainsidebar/MainSidebar2';
@@ -69,6 +69,11 @@ type DispatchProps = {
   setActiveSheet: typeof setActiveSheet;
 };
 
+const MainContent = styled(FlexRow)({
+  height: 'calc(100vh - 38px)',
+});
+MainContent.displayName = 'App:MainContent';
+
 type Props = StateFromProps & OwnProps & DispatchProps;
 
 export class App extends React.Component<Props> {
@@ -155,7 +160,7 @@ export class App extends React.Component<Props> {
         <DoctorBar />
         <ErrorBar />
         <Sheet>{this.getSheet}</Sheet>
-        <FlexRow grow={true}>
+        <MainContent>
           {this.props.leftSidebarVisible && <MainSidebar2 />}
           {this.props.staticView != null ? (
             React.createElement(this.props.staticView, {
@@ -168,7 +173,7 @@ export class App extends React.Component<Props> {
             id="flipper-out-of-contents-container"
             style={{width: '100%', display: 'none'}}
           />
-        </FlexRow>
+        </MainContent>
         <StatusBar />
       </FlexColumn>
     );