Merge css fixes from legacy app

1 files changed, 35 insertions, 14 deletions

diff --git a/vnext/src/index.css b/vnext/src/index.css
index 9117fe1c..5a829f03 100644
--- a/vnext/src/index.css
+++ b/vnext/src/index.css
@@ -138,14 +138,16 @@ hr {
 }
 
 #sidebar {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    border-top: 1px solid var(--border-color);
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
+    z-index: 10;
+}
+#sidebar_wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
 }
 
 .nav_content {
@@ -228,7 +230,7 @@ hr {
     padding: 14px 16px;
 }
 
-#sidebar > a,
+#sidebar_wrapper > a,
 .l > a {
     color: var(--dimmed-link-color);
     display: flex;
@@ -237,7 +239,7 @@ hr {
     vertical-align: middle;
 }
 
-#sidebar > a:hover {
+#sidebar_wrapper > a:hover {
     background-color: var(--background-color);
     border-top: 2px solid #ff339a;
     cursor: pointer;
@@ -341,24 +343,43 @@ hr {
         display: none;
     }
     #content {
-        margin-left: 320px;
+        width: 100%;
         margin-bottom: 12px;
         padding-bottom: 12px;
     }
     #sidebar {
-        left: 0;
-        top: 64px;
+        position: sticky;
+        padding: 12px;
+        margin-top: 66px;
+        height: 100%;
+        z-index: auto;
+        overflow-y: auto;
+    }
+    article,
+    .page,
+    .msg-cont {
+        width: 640px;
+    }
+    #sidebar_wrapper {
+        width: 300px;
+        overflow-y: auto;
+        height: 100%;
         flex-direction: column;
-        border-top: 1px solid transparent;
-        justify-content: normal;
-        width: 320px;
     }
-    #sidebar a,
+    #sidebar_wrapper a,
     .l a {
         border-right: 2px solid transparent;
     }
-    #sidebar > a:hover {
+    #sidebar_wrapper > a:hover {
         border-top: initial;
         border-right: 2px solid #ff339a;
     }
+    #header_wrapper,
+    #content_wrapper {
+        width: 1000px;
+        margin: 0 auto;
+    }
+    #content_wrapper {
+        display: flex;
+    }
 }