Improve PageLayout

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 {

src/components/PageLayout/PageLayout.css

@@ -0,0 +1,10 @@
+.root {
+  display: flex;
+  flex-direction: column;
+
+  min-height: 100vh;
+}
+
+.content {
+  flex-grow: 1;
+}

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>
     );
   }