Make Footer sticky with Flex (este#1247)

Author: mjsisley

src/browser/app/App.js

@@ -9,7 +9,7 @@ import R from 'ramda';
 import React from 'react';
 import favicon from '../../common/app/favicon';
 import start from '../../common/app/start';
-import { Container } from '../app/components';
+import { Box, Container, Flex } from '../app/components';
 import { Match, ThemeProvider } from '../../common/app/components';
 import { Miss } from 'react-router';
 import { connect } from 'react-redux';
@@ -25,6 +25,15 @@ import OfflinePage from '../offline/OfflinePage';
 import SignInPage from '../auth/SignInPage';
 import TodosPage from '../todos/TodosPage';
 
+const styles = {
+  container: {
+    minHeight: '100vh',
+  },
+  page: {
+    flex: 1,
+  },
+};
+
 // v4-alpha.getbootstrap.com/getting-started/introduction/#starter-template
 const bootstrap4Metas: any = [
   { charset: 'utf-8' },
@@ -59,17 +68,21 @@ const App = ({ currentLocale, currentTheme }) => (
           ...favicon.link,
         ]}
       />
-      <Header />
-      <Match exactly pattern="/" component={HomePage} />
-      <Match pattern="/fields" component={FieldsPage} />
-      <Match pattern="/users" component={UsersPage} />
-      <Match pattern="/intl" component={IntlPage} />
-      <Match pattern="/offline" component={OfflinePage} />
-      <Match pattern="/signin" component={SignInPage} />
-      <Match pattern="/todos" component={TodosPage} />
-      <Match authorized pattern="/me" component={MePage} />
-      <Miss component={NotFoundPage} />
-      <Footer />
+      <Flex flexColumn style={styles.container}>
+        <Header />
+        <Box style={styles.page}>
+          <Match exactly pattern="/" component={HomePage} />
+          <Match pattern="/fields" component={FieldsPage} />
+          <Match pattern="/users" component={UsersPage} />
+          <Match pattern="/intl" component={IntlPage} />
+          <Match pattern="/offline" component={OfflinePage} />
+          <Match pattern="/signin" component={SignInPage} />
+          <Match pattern="/todos" component={TodosPage} />
+          <Match authorized pattern="/me" component={MePage} />
+          <Miss component={NotFoundPage} />
+        </Box>
+        <Footer />
+      </Flex>
     </Container>
   </ThemeProvider>
 );