From 57f1aadc0d1bb53d8bcf2ba655b35c8157b8fc43 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Tue, 12 Feb 2019 21:34:34 +0000
Subject: [PATCH] Expand containers to fill full vertical height.

---
 src/App.tsx   | 10 +++++++++-
 src/index.css | 10 ++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 12957f6..1ac3549 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -181,10 +181,18 @@ class App extends React.PureComponent {
 
     const fetching = this.props.fetchCount > 0;
 
+    const styles = {
+      main: {
+        backgroundColor: muiTheme.palette.background.default,
+        color: muiTheme.palette.text.primary,
+        flexGrow: 1
+      },
+    };
+
     return (
       <ThemeProvider theme={muiTheme}>
         <BrowserRouter>
-        <div style={{backgroundColor: muiTheme.palette.background.default, color: muiTheme.palette.text.primary}}>
+        <div style={styles.main}>
           <AppBarWitHistory
             toggleDrawerIcon={<IconButton onClick={this.toggleDrawer}><NavigationMenu /></IconButton>}
             iconElementRight={
diff --git a/src/index.css b/src/index.css
index 3d3a949..0d68a5b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,8 @@
+html,
+body {
+    height: 100%;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -19,4 +24,9 @@ body:before {
 
 #root {
   background-color: white;
+
+  min-height: 100%;
+  background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
 }