style(page): ensure page is full height

app/components/UI/GlobalStyle.js

@@ -23,6 +23,7 @@ const GlobalStyle = createGlobalStyle`
 
   html {
     box-sizing: border-box;
+    height: 100%;
   }
 
   *, *:before, *:after {
@@ -30,6 +31,7 @@ const GlobalStyle = createGlobalStyle`
   }
 
   body {
+    height: 100%;
     position: relative;
     overflow-y: hidden;
     -webkit-font-smoothing: antialiased;
@@ -39,6 +41,10 @@ const GlobalStyle = createGlobalStyle`
     font-size: 13px;
   }
 
+  #root {
+    height: 100%;
+  }
+
   .element-show {
     display: inherit;
   }

app/components/UI/Modal.js

@@ -46,7 +46,7 @@ class Modal extends React.Component {
             <X width="2em" height="2em" />
           </Box>
         </Flex>
-        <Box as="section" p={2} css={{ flex: 1 }}>
+        <Box as="section" p={3} pt={1} css={{ flex: 1 }}>
           {children}
         </Box>
       </Flex>

app/components/UI/Page.js

@@ -14,6 +14,7 @@ const Page = ({ css, ...rest }) => (
     as="article"
     css={Object.assign(
       {
+        height: '100%',
         'min-width': '950px',
         'min-height': '600px',
         'overflow-y': 'hidden',

test/unit/components/UI/__snapshots__/Modal.spec.js.snap

@@ -9,7 +9,8 @@ exports[`component.UI.Modal should render correctly 1`] = `
 }
 
 .c3 {
-  padding: 8px;
+  padding: 16px;
+  padding-top: 4px;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;

test/unit/components/UI/__snapshots__/Page.spec.js.snap

@@ -3,6 +3,7 @@
 exports[`component.UI.Page should render correctly 1`] = `
 .c0 {
   background-color: darkestBackground;
+  height: 100%;
   min-width: 950px;
   min-height: 600px;
   overflow-y: hidden;