From 938f42439c8406ee4700f89b8ac5f51e3c208342 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Wed, 7 Nov 2018 19:25:20 +0100
Subject: [PATCH] style(page): ensure page is full height

---
 app/components/UI/GlobalStyle.js                         | 6 ++++++
 app/components/UI/Modal.js                               | 2 +-
 app/components/UI/Page.js                                | 1 +
 test/unit/components/UI/__snapshots__/Modal.spec.js.snap | 3 ++-
 test/unit/components/UI/__snapshots__/Page.spec.js.snap  | 1 +
 5 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/components/UI/GlobalStyle.js b/app/components/UI/GlobalStyle.js
index 1a2f9dca..49ae7dd1 100644
--- a/app/components/UI/GlobalStyle.js
+++ b/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;
   }
diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js
index d0dd6d29..15a8b35d 100644
--- a/app/components/UI/Modal.js
+++ b/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>
diff --git a/app/components/UI/Page.js b/app/components/UI/Page.js
index 8e037fe3..64b2ad1d 100644
--- a/app/components/UI/Page.js
+++ b/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',
diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
index 373a43fa..d88fef06 100644
--- a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
+++ b/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;
diff --git a/test/unit/components/UI/__snapshots__/Page.spec.js.snap b/test/unit/components/UI/__snapshots__/Page.spec.js.snap
index 37cffc08..6a4a96ae 100644
--- a/test/unit/components/UI/__snapshots__/Page.spec.js.snap
+++ b/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;