feat: use position: sticky on discussion sidenav

less/common/App.less

@@ -2,8 +2,8 @@
   position: relative !important;
   padding-top: var(--header-height);
   padding-bottom: 50px;
-  overflow-x: hidden;
   min-height: 100vh;
+  width: 100%;
 
   @media @phone {
     padding-top: var(--header-height-phone);
@@ -27,13 +27,16 @@
       box-shadow: 0 2px 6px var(--shadow-color);
     }
   }
-  .App-primaryControl, .App-titleControl, .App-backControl {
+  .App-primaryControl,
+  .App-titleControl,
+  .App-backControl {
     position: absolute !important;
     z-index: calc(~"var(--zindex-header) + 1");
     top: 0 !important;
     margin: 0;
 
-    .App.affix &, .Composer & {
+    .App.affix &,
+    .Composer & {
       position: fixed !important;
     }
 
@@ -59,15 +62,18 @@
     right: 0;
 
     &.Dropdown {
-      .Button, .Button-caret {
+      .Button,
+      .Button-caret {
         display: none !important;
       }
-      .Dropdown-toggle, .Button-icon {
+      .Dropdown-toggle,
+      .Button-icon {
         display: block !important;
       }
     }
   }
-  .App-primaryControl, .App-backControl {
+  .App-primaryControl,
+  .App-backControl {
     margin: 0 !important;
 
     > .Button {
@@ -90,7 +96,8 @@
     text-align: center;
     color: var(--header-color) !important;
 
-    &, > .Button {
+    &,
+    > .Button {
       font-size: 16px;
     }
     > .Button {
@@ -143,7 +150,7 @@
 
     .drawerOpen & {
       -webkit-transform: none !important;
-              transform: none !important;
+      transform: none !important;
     }
   }
   .drawer-backdrop {
@@ -200,12 +207,15 @@
     > li {
       padding: 0 10px 0;
     }
-    .FormControl, .ButtonGroup, .Button {
+    .FormControl,
+    .ButtonGroup,
+    .Button {
       width: 100%;
       text-align: left;
     }
     .Dropdown-menu {
-      .ButtonGroup, .Button {
+      .ButtonGroup,
+      .Button {
         width: auto;
       }
     }
@@ -221,7 +231,7 @@
 @media @phone {
   .App-drawer {
     & when (@config-colored-header = true) {
-      .light-contents(@name: 'header-colored');
+      .light-contents(@name: "header-colored");
     }
   }
 }
@@ -245,7 +255,7 @@
     }
 
     & when (@config-colored-header = true) {
-      .light-contents(@name: 'header-colored');
+      .light-contents(@name: "header-colored");
     }
   }
 
@@ -254,7 +264,8 @@
     margin-right: 25px;
   }
   .Header-controls {
-    &, > li {
+    &,
+    > li {
       display: inline-block;
       vertical-align: middle;
     }

less/common/scaffolding.less

@@ -13,6 +13,7 @@ body {
   font-size: 13px;
   line-height: 1.5;
   overflow-y: scroll;
+  width: 100%;
 }
 
 h1, h2, h3, h4, h5, h6 {

less/forum/DiscussionPage.less

@@ -15,7 +15,8 @@
       margin: 15px;
       display: inline-block;
 
-      &.item-controls, &.item-scrubber {
+      &.item-controls,
+      &.item-scrubber {
         margin: 0;
         display: block;
       }
@@ -23,22 +24,27 @@
   }
 }
 @media @tablet-up {
-  .DiscussionPage-nav {
-    float: right;
+  .DiscussionPage-discussion > .container {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .DiscussionPage-nav {
+    min-width: 150px;
 
-    &, > ul {
-      width: 150px;
-    }
     > ul {
-      position: fixed;
-      margin-top: 30px;
+      margin-top: 24px;
+      position: sticky;
+      top: ~"calc(24px + var(--header-height))";
       z-index: 1;
+      width: 100%;
 
       > li {
         margin-bottom: 10px;
       }
     }
-    .ButtonGroup, .Button {
+    .ButtonGroup,
+    .Button {
       width: 100%;
     }
     .ButtonGroup:not(.itemCount1) {
@@ -54,7 +60,7 @@
 
 @media @tablet-up {
   .DiscussionPage-stream {
-    margin-right: 225px;
+    margin-right: 75px;
   }
 }
 
@@ -132,7 +138,8 @@
     }
   }
   // When the pane is pinned, move the other page content inwards
-  .App-content, .App-footer {
+  .App-content,
+  .App-footer {
     .hasPane.panePinned & {
       margin-left: var(--pane-width);