Merge css fixes from legacy app

2 files changed, 102 insertions, 77 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 91adf0b9..c3d4e5aa 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -149,70 +149,74 @@ export default function App() {
   return (
     <>
       <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} />
-      <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
-        <Switch>
-          <Route exact path="/">
-            <Discussions visitor={visitor} />
-          </Route>
-          <Route exact path="/home">
-            <Home visitor={visitor} />
-          </Route>
-          <Route exact path="/discover">
-            <Discover visitor={visitor} />
-          </Route>
-          <Route exact path="/settings">
-            <Settings visitor={visitor} onChange={auth} />
-          </Route>
-          <Route exact path="/login">
-            <Login visitor={visitor} onAuth={auth} />
-          </Route>
-          <Route exact path="/post">
-            <Post visitor={visitor} />
-          </Route>
-          <Route exact path="/pm">
-            <Contacts visitor={visitor} />
-          </Route>
-          <Route exact path="/pm/:user">
-            <Chat connection={eventSource} visitor={visitor} />
-          </Route>
-          <Route exact path="/:user/friends">
-            <Friends />
-          </Route>
-          <Route exact path="/:user/readers">
-            <Readers />
-          </Route>
-          <Route exact path="/:user">
-            <Blog visitor={visitor} />
-          </Route>
-          <Route exact path="/tag/:tag">
-            <Tag visitor={visitor} />
-          </Route>
-          <Route exact path="/:user/:mid">
-            <Thread connection={eventSource} visitor={visitor} />
-          </Route>
-        </Switch>
-      </section>
+      <div id="content_wrapper">
       {
-        visitor.uid > 0 &&
-        <aside id="sidebar">
-          <Link to="/?show=my">
-            <Icon name="ei-clock" size="s" />
-            <span className="desktop">My feed</span>
-          </Link>
-          <Link to="/pm">
-            <Icon name="ei-envelope" size="s" />
-            <span className="desktop">Messages</span>
-          </Link>
-          <Link to="/?show=discuss">
-            <Icon name="ei-bell" size="s" />
-            <span className="desktop">Discussions</span>
-          </Link>
-          <Link to="/settings" rel="nofollow">
-            <Icon name="ei-gear" size="s" />
-            <span className="desktop">Settings</span>
-          </Link>
-        </aside>
-      }
+          visitor.uid > 0 &&
+          <aside id="sidebar">
+            <div id="sidebar_wrapper">
+              <Link to="/?show=my">
+                <Icon name="ei-clock" size="s" />
+                <span className="desktop">My feed</span>
+              </Link>
+              <Link to="/pm">
+                <Icon name="ei-envelope" size="s" />
+                <span className="desktop">Messages</span>
+              </Link>
+              <Link to="/?show=discuss">
+                <Icon name="ei-bell" size="s" />
+                <span className="desktop">Discussions</span>
+              </Link>
+              <Link to="/settings" rel="nofollow">
+                <Icon name="ei-gear" size="s" />
+                <span className="desktop">Settings</span>
+              </Link>
+            </div>
+          </aside>
+        }
+        <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}>
+          <Switch>
+            <Route exact path="/">
+              <Discussions visitor={visitor} />
+            </Route>
+            <Route exact path="/home">
+              <Home visitor={visitor} />
+            </Route>
+            <Route exact path="/discover">
+              <Discover visitor={visitor} />
+            </Route>
+            <Route exact path="/settings">
+              <Settings visitor={visitor} onChange={auth} />
+            </Route>
+            <Route exact path="/login">
+              <Login visitor={visitor} onAuth={auth} />
+            </Route>
+            <Route exact path="/post">
+              <Post visitor={visitor} />
+            </Route>
+            <Route exact path="/pm">
+              <Contacts visitor={visitor} />
+            </Route>
+            <Route exact path="/pm/:user">
+              <Chat connection={eventSource} visitor={visitor} />
+            </Route>
+            <Route exact path="/:user/friends">
+              <Friends />
+            </Route>
+            <Route exact path="/:user/readers">
+              <Readers />
+            </Route>
+            <Route exact path="/:user">
+              <Blog visitor={visitor} />
+            </Route>
+            <Route exact path="/tag/:tag">
+              <Tag visitor={visitor} />
+            </Route>
+            <Route exact path="/:user/:mid">
+              <Thread connection={eventSource} visitor={visitor} />
+            </Route>
+          </Switch>
+        </section>
+      </div>
     </>
   );
 }
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;
+    }
 }