Fixed header

1 files changed, 22 insertions, 8 deletions

diff --git a/vnext/src/index.css b/vnext/src/index.css
index c01d2aae..a371ae55 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -111,20 +111,30 @@ hr {
 }
 
 #app {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+#wrapper {
     display: grid;
-    grid-template-areas: "header" "content" "footer";
+    grid-template-areas: "content" "footer";
     grid-template-columns: 100%;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: 1fr auto;
     height: 100%;
     width: 100%;
+    overflow: hidden;
 }
 
 #header {
-    grid-area: header;
     background: var(--text-background-color);
     border-bottom: 1px solid var(--border-color);
     transition: transform 0.2s;
+    z-index: 10;
     overflow-x: hidden;
+    position: fixed;
+    width: 100%;
+    top: 0;
 }
 
 .header--hidden {
@@ -153,8 +163,8 @@ hr {
 
 #content {
     grid-area: content;
-    margin-top: 12px;
-    overflow-y: scroll;
+    margin-top: 64px;
+    overflow: auto;
 }
 
 #footer {
@@ -350,9 +360,12 @@ hr {
 
 @media (--viewport-desktop) {
     #app {
-        grid-template-areas: "header header header header"". footer content .";
+        overflow: initial;
+    }
+    #wrapper {
+        grid-template-areas: ". footer content .";
         grid-template-columns: auto 240px 760px auto;
-        grid-template-rows: auto 1fr;
+        overflow: initial;
     }
     #header_wrapper,
     .footer_container {
@@ -367,12 +380,13 @@ hr {
     }
     #content {
         margin-bottom: 12px;
+        overflow: initial;
     }
     #sidebar {
         flex-direction: column;
         justify-content: initial;
         border-top: initial;
-        margin-top: 12px;
+        margin-top: 64px;
     }
     #sidebar a,
     .l a {