From 1f626d35ac462a5d4682b3387a58ac99eb0e9d85 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Tue, 16 Jun 2020 13:40:08 -0700
Subject: [PATCH] feat: Spacing and sizing layout tweaks

---
 src/components/Footer.module.scss  |  1 -
 src/components/Layout.js           |  8 ++++----
 src/components/Layout.module.scss  | 12 ++++++++++--
 src/components/Sidebar.module.scss |  2 +-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
index ba2147c2c..4471b8ec9 100644
--- a/src/components/Footer.module.scss
+++ b/src/components/Footer.module.scss
@@ -4,7 +4,6 @@
   background-color: var(--color-neutrals-800);
   color: var(--footer-text-color);
   padding: 1.5rem 0;
-  margin-top: 10rem;
 }
 
 .leftColumn {
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 0d8d861b2..870545fd5 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -9,14 +9,14 @@ import pages from '../data/sidenav.json';
 import './styles.scss';
 
 const Layout = ({ children }) => (
-  <>
+  <div className={styles.layout}>
     <Header />
-    <div className={styles.layout}>
+    <div className={styles.main}>
       <Sidebar pages={pages} />
-      <main>{children}</main>
+      <main className={styles.content}>{children}</main>
     </div>
     <Footer pages={pages} />
-  </>
+  </div>
 );
 
 Layout.propTypes = {
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index a951221fb..1beb42455 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -1,8 +1,16 @@
 .layout {
   min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.main {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
-  grid-gap: 1rem;
-  max-width: 1200px;
+  max-width: 1460px;
   margin: 0 auto;
 }
+
+.content {
+  padding: 2rem;
+}
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index ab02a1041..eb819fa43 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -1,5 +1,5 @@
 .sidebar {
-  padding: 2rem 0;
+  padding: 2rem;
   border-right: 1px solid var(--color-neutrals-100);
 
   ul {