Align footer to bottom (#1150)

common/components/Footer/PreFooter.scss

@@ -1,9 +1,9 @@
-@import "common/sass/variables";
+@import 'common/sass/variables';
 
 .pre-footer {
   padding: 1rem;
-  box-shadow: 16px 16px 47px 0 rgba(0, 0, 0, .07);
-  margin-top: 5rem;
+  box-shadow: 16px 16px 47px 0 rgba(0, 0, 0, 0.07);
+  margin-top: 2rem;
   background-color: white;
   text-align: center;
 

common/containers/TabSection/index.tsx

@@ -24,13 +24,12 @@ class TabSection extends Component<Props, {}> {
 
     return (
       <div className="page-layout">
-        <main>
-          <Header />
-          <div className="Tab container">
-            {isUnavailableOffline && isOffline ? <OfflineTab /> : children}
-          </div>
-          <Footer latestBlock={latestBlock} />
-        </main>
+        <Header />
+        <div className="Tab container">
+          {isUnavailableOffline && isOffline ? <OfflineTab /> : children}
+        </div>
+        <div className="flex-spacer" />
+        <Footer latestBlock={latestBlock} />
         <Notifications />
         <AlphaAgreement />
       </div>

common/sass/styles/scaffolding.scss

@@ -34,6 +34,20 @@ body {
   height: 100%;
 }
 
+#app {
+  height: 100%;
+}
+
+.page-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  > .flex-spacer {
+    flex-grow: 2;
+  }
+}
+
 input,
 button,
 select,