UX: Improve styling of sidebar on mobile (#18246)

* Make sidebar footer is sticky
* Ensure that only the sidebar sections is scrollable

app/assets/stylesheets/common/base/sidebar.scss

@@ -45,10 +45,6 @@
     box-sizing: border-box;
     flex: 1;
     padding: 1em 0;
-    box-sizing: border-box;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
     overflow-x: hidden;
     overflow-y: overlay;
 

app/assets/stylesheets/mobile/_index.scss

@@ -24,7 +24,6 @@
 @import "reviewables";
 @import "ring";
 @import "search";
-@import "sidebar";
 @import "tagging";
 @import "topic-list";
 @import "topic-post";

app/assets/stylesheets/mobile/menu-panel.scss

@@ -1,5 +1,6 @@
 .hamburger-panel .menu-panel.slide-in {
   left: 0;
+
   .panel-body {
     display: block;
   }
@@ -61,7 +62,7 @@
 
 .panel-body-contents {
   // 2em padding very useful for iOS Safari's overlayed bottom nav
-  padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
+  // padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
 
   .user-menu.revamped & {
     height: 100%;
@@ -69,11 +70,23 @@
 }
 
 .hamburger-panel .revamped {
-  --d-sidebar-row-horizontal-padding: 0.5rem;
+  --d-sidebar-row-horizontal-padding: 1rem;
   --d-sidebar-highlight-color: var(--primary-low);
+  box-sizing: border-box;
+  padding: 0;
+
+  .panel-body-contents {
+    height: 100%;
+
+    .sidebar-hamburger-dropdown {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
 
   .sidebar-row {
-    padding: 0.5rem var(--d-sidebar-row-horizontal-padding);
+    padding: 1.2rem var(--d-sidebar-row-horizontal-padding);
     height: 27px;
     align-items: center;
     font-size: var(--font-0);
@@ -82,4 +95,16 @@
   .sidebar-section-wrapper {
     margin-bottom: 0.5em;
   }
+
+  .sidebar-footer-wrapper {
+    margin-top: 0;
+  }
+
+  .sidebar-sections {
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+  }
 }

app/assets/stylesheets/mobile/sidebar.scss

@@ -1,8 +0,0 @@
-.sidebar-footer-wrapper {
-  position: static;
-  margin-top: 1em;
-  .sidebar-footer-container {
-    background: transparent;
-    padding: 0.5em 0.1em;
-  }
-}