/* @flow */
import React, { Component, PropTypes } from 'react';
import GrommetApp from 'grommet/components/App';
import { AppContainer as ReactHotLoader } from 'react-hot-loader';
import { Nav, PageMarquee, Footer } from 'components';

// eslint-disable-next-line react/prefer-stateless-function
class RootApp extends Component {
  render() {
    return (
      <ReactHotLoader>
        <GrommetApp centered={false}>
          <Nav />
          <PageMarquee />
          {this.props.children}
          <Footer />
        </GrommetApp>
      </ReactHotLoader>
    );
  }
}

RootApp.propTypes = {
  children: PropTypes.node.isRequired,
};

export default RootApp;

@@ -107,16 +107,58 @@
 s/App';%0A
+import Box from 'grommet/components/Box';%0A
 import %7B
@@ -434,16 +434,26 @@
 ommetApp
+%0A         
  centere
@@ -465,105 +465,362 @@
 lse%7D
-%3E%0A          %3CNav /%3E%0A          %3CPageMarquee /%3E%0A          %7Bthis.props.children%7D%0A          %3CFooter /
+%0A          style=%7B%7B%0A            minHeight: '100vh',%0A            display: 'flex',%0A            flexDirection: 'column',%0A          %7D%7D%0A        %3E%0A          %3CNav /%3E%0A          %3CBox flex style=%7B%7B minHeight: '100%25' %7D%7D%3E%0A            %3CPageMarquee /%3E%0A            %3CBox flex%3E%0A              %7Bthis.props.children%7D%0A            %3C/Box%3E%0A            %3CFooter /%3E%0A          %3C/Box
 %3E%0A  

Add full browser height page layout.