From 6234d4d4f8b70f587aa0ef9728678b8e84fd8f1f Mon Sep 17 00:00:00 2001
From: Mikko Koski <mikkokos@gmail.com>
Date: Fri, 24 Mar 2017 16:36:39 +0200
Subject: [PATCH] Improve PageLayout

---
 src/components/MobileFrame/MobileFrame.css |  3 ---
 src/components/PageLayout/PageLayout.css   | 10 ++++++++++
 src/components/PageLayout/PageLayout.js    |  9 +++++++--
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 src/components/PageLayout/PageLayout.css

diff --git a/src/components/MobileFrame/MobileFrame.css b/src/components/MobileFrame/MobileFrame.css
index 1f02a9f0..669b218f 100644
--- a/src/components/MobileFrame/MobileFrame.css
+++ b/src/components/MobileFrame/MobileFrame.css
@@ -5,9 +5,6 @@
   max-width: 375px;
   box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
   position: relative;
-
-  /* Make the frame to fill the whole screen */
-  min-height: 100vh;
 }
 
 .remove {
diff --git a/src/components/PageLayout/PageLayout.css b/src/components/PageLayout/PageLayout.css
new file mode 100644
index 00000000..5339d850
--- /dev/null
+++ b/src/components/PageLayout/PageLayout.css
@@ -0,0 +1,10 @@
+.root {
+  display: flex;
+  flex-direction: column;
+
+  min-height: 100vh;
+}
+
+.content {
+  flex-grow: 1;
+}
diff --git a/src/components/PageLayout/PageLayout.js b/src/components/PageLayout/PageLayout.js
index e1f48658..dce7f079 100644
--- a/src/components/PageLayout/PageLayout.js
+++ b/src/components/PageLayout/PageLayout.js
@@ -4,6 +4,9 @@ import Helmet from 'react-helmet';
 import { withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { Topbar } from '../../containers';
+import classNames from 'classnames';
+
+import css from './PageLayout.css';
 
 const scrollToTop = () => {
   // Todo: this might need fine tuning later
@@ -36,7 +39,7 @@ class PageLayout extends Component {
     /* eslint-enable no-console */
 
     return (
-      <div className={className}>
+      <div className={classNames(css.root, className)}>
         <Helmet title={title} />
         {authInfoError
           ? <div style={{ color: 'red' }}>
@@ -49,7 +52,9 @@ class PageLayout extends Component {
             </div>
           : null}
         <Topbar />
-        {children}
+        <div className={css.content}>
+          {children}
+        </div>
       </div>
     );
   }