From 48536f79be00ae423010c68c26912749d3a517c9 Mon Sep 17 00:00:00 2001
From: James Prado <james-prado@users.noreply.github.com>
Date: Sat, 24 Feb 2018 12:57:54 -0500
Subject: [PATCH] Align footer to bottom (#1150)

---
 common/components/Footer/PreFooter.scss |  6 +++---
 common/containers/TabSection/index.tsx  | 13 ++++++-------
 common/sass/styles/scaffolding.scss     | 14 ++++++++++++++
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/common/components/Footer/PreFooter.scss b/common/components/Footer/PreFooter.scss
index d188b1f0..aeccb771 100644
--- a/common/components/Footer/PreFooter.scss
+++ b/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;
 
diff --git a/common/containers/TabSection/index.tsx b/common/containers/TabSection/index.tsx
index 7d86f79d..cf2eed47 100644
--- a/common/containers/TabSection/index.tsx
+++ b/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>
diff --git a/common/sass/styles/scaffolding.scss b/common/sass/styles/scaffolding.scss
index 01a320a2..ae72d1b7 100644
--- a/common/sass/styles/scaffolding.scss
+++ b/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,