Refactor history sidebar, reduce thrashing on doc render

app/components/Layout.js

@@ -9,13 +9,19 @@ import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import Analytics from 'components/Analytics';
 import Flex from 'shared/components/Flex';
-import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
+import {
+  documentEditUrl,
+  homeUrl,
+  searchUrl,
+  matchDocumentSlug as slug,
+} from 'utils/routeHelpers';
 
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import { GlobalStyles } from 'components/DropToImport';
 import Sidebar from 'components/Sidebar';
 import SettingsSidebar from 'components/Sidebar/Settings';
 import Modals from 'components/Modals';
+import DocumentHistory from 'components/DocumentHistory';
 import ErrorSuspended from 'scenes/ErrorSuspended';
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
@@ -91,7 +97,7 @@ class Layout extends React.Component<Props> {
         {this.props.ui.progressBarVisible && <LoadingIndicatorBar />}
         {this.props.notifications}
 
-        <Flex auto>
+        <Container auto>
           {showSidebar && (
             <Switch>
               <Route path="/settings" component={SettingsSidebar} />
@@ -102,7 +108,14 @@ class Layout extends React.Component<Props> {
           <Content auto justify="center" editMode={ui.editMode}>
             {this.props.children}
           </Content>
-        </Flex>
+
+          <Switch>
+            <Route
+              path={`/doc/${slug}/history/:revisionId?`}
+              component={DocumentHistory}
+            />
+          </Switch>
+        </Container>
         <Modals ui={ui} />
         <GlobalStyles />
       </Container>
@@ -112,8 +125,8 @@ class Layout extends React.Component<Props> {
 
 const Container = styled(Flex)`
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  min-height: 100%;
 `;
 
 const Content = styled(Flex)`