Let sidebar scroll to the bottom

src/App.scss

@@ -610,7 +610,7 @@ nav {
     margin-top: -10px;
 
     .sidebar-scroller {
-      height: 96vh;
+      height: calc(100vh - #{$top-nav-height});
       width: 365px;
       padding-top: 10px;
       padding-right: 50px;

src/_variables.scss

@@ -32,3 +32,6 @@ $fallback--chatMessageRadius: 10px;
 $fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 
 $status-margin: 0.75em;
+
+$top-nav-height: 50px;
+$small-spacing: 5px;

src/components/desktop_nav/desktop_nav.scss

@@ -1,7 +1,7 @@
 @import '../../_variables.scss';
 
 .DesktopNav {
-  height: 50px;
+  height: $top-nav-height;
   width: 100%;
   position: fixed;
 
@@ -11,7 +11,7 @@
 
   .inner-nav {
     display: grid;
-    grid-template-rows: 50px;
+    grid-template-rows: $top-nav-height;
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
@@ -77,7 +77,7 @@
 
     img {
       display: inline-block;
-      height: 50px;
+      height: $top-nav-height;
     }
   }
 
@@ -103,8 +103,8 @@
 
   .item {
     flex: 1;
-    line-height: 50px;
-    height: 50px;
+    line-height: $top-nav-height;
+    height: $top-nav-height;
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;

src/components/mobile_nav/mobile_nav.vue

@@ -92,9 +92,9 @@
 .MobileNav {
   .mobile-nav {
     display: grid;
-    line-height: 50px;
-    height: 50px;
-    grid-template-rows: 50px;
+    line-height: $top-nav-height;
+    height: $top-nav-height;
+    grid-template-rows: $top-nav-height;
     grid-template-columns: 2fr auto;
     width: 100%;
     position: fixed;
@@ -167,8 +167,8 @@
     justify-content: space-between;
     z-index: 1;
     width: 100%;
-    height: 50px;
-    line-height: 50px;
+    height: $top-nav-height;
+    line-height: $top-nav-height;
     position: absolute;
     color: var(--topBarText);
     background-color: $fallback--fg;
@@ -183,9 +183,9 @@
   }
 
   .mobile-notifications {
-    margin-top: 50px;
+    margin-top: $top-nav-height;
     width: 100vw;
-    height: calc(100vh - 50px);
+    height: calc(100vh - #{$top-nav-height});
     overflow-x: hidden;
     overflow-y: scroll;