chore: Use flex and get rid of floating div

newrelic · Jun 19, 2020 · fd9dfcb · fd9dfcb
1 parent 37fd8a3
commit fd9dfcb
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -23,7 +23,6 @@ const Layout = ({ children }) => {
       />
       <div className={cx(styles.main, 'site-container')}>
         <Sidebar className={cx(styles.sidebar, styles.hideOnMobile)} />
-        <div />
         <div
           className={cx(styles.contentContainer, {
             [styles.hideOnMobile]: isMobileNavOpen,

diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
@@ -1,14 +1,14 @@
 .layout {
   --global-header-height: 30px;
+  --sidebar-width: 300px;
 
   min-height: 100vh;
   display: grid;
   grid-template-rows: auto 1fr;
 }
 
 .main {
-  display: grid;
-  grid-template-columns: 300px minmax(0, 1fr);
+  display: flex;
   width: 100%;
 
   @media screen and (max-width: 760px) {
@@ -20,13 +20,14 @@
   display: flex;
   flex-direction: column;
   padding: 2rem;
+  padding-left: calc(2rem + var(--sidebar-width));
 }
 
 .sidebar {
   position: fixed;
   top: var(--global-header-height);
   bottom: 0;
-  width: 300px;
+  width: var(--sidebar-width);
   height: calc(100vh - var(--global-header-height));
   overflow: auto;
 }