UX: revert sidebar scrollbar repositioning (#18076)

app/assets/javascripts/discourse/app/components/sidebar.hbs

@@ -1,9 +1,8 @@
 <DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
-  <div class="sidebar-scroll-wrap">
+  {{#if this.currentUser}}
-    {{#if this.currentUser}}
+    <Sidebar::User::Sections @collapsableSections={{true}}/>
-      <Sidebar::User::Sections @collapsableSections={{true}}/>
+  {{else}}
-    {{else}}
+    <Sidebar::Anonymous::Sections />
-      <Sidebar::Anonymous::Sections />
+  {{/if}}
-    {{/if}}
+  <Sidebar::Footer />
-  </div>
 </DSection>

app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs

@@ -4,6 +4,7 @@
       <div class="panel-body-contents">
         <div class="sidebar-hamburger-dropdown">
           <Sidebar::User::Sections @collapsableSections={{false}}/>
+          <Sidebar::Footer @tagName="" />
         </div>
       </div>
     </div>

app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs

@@ -45,5 +45,4 @@
       {{/each}}
     </Sidebar::Section>
   {{/each}}
-  <Sidebar::Footer />
 </div>

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

@@ -1,8 +1,6 @@
 .sidebar-footer-wrapper {
   box-sizing: border-box;
   width: 100%;
-  margin-top: auto;
-  padding-top: 1em;
   position: sticky;
   bottom: 0;
 

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

@@ -5,10 +5,11 @@
 }
 
 .sidebar-wrapper {
+  display: flex;
   --d-sidebar-highlight-color: var(--primary-low);
   // 1.25rem gets text left-aligned with the hamburger icon
   --d-sidebar-row-horizontal-padding: 1.25rem;
-
+  background-color: var(--primary-very-low);
   grid-area: sidebar;
   position: sticky;
   top: var(--header-offset);
@@ -16,7 +17,7 @@
   .footer-nav-ipad & {
     top: calc(var(--header-offset) + var(--footer-nav-height));
   }
-  height: calc(100vh - var(--header-offset));
+  height: calc(100vh - var(--header-offset, 0));
   align-self: start;
   overflow-y: auto;
 
@@ -31,11 +32,19 @@
     flex-direction: column;
     box-sizing: border-box;
     height: 100%;
+    width: 100%;
     padding: 0;
     overflow-x: hidden;
+    // allows sidebar to scroll to the bottom when the composer is open
+    height: calc(100% - var(--composer-height, 0));
   }
 
-  .sidebar-scroll-wrap {
+  .sidebar-sections {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    flex: 1;
+    padding: 1em 0;
     box-sizing: border-box;
     flex: 1;
     display: flex;
@@ -76,20 +85,6 @@
       // 0.5em gives webkit browsers a little space between the scrollbar and the content
       width: calc(var(--scrollbarWidth) - 0.45em);
     }
-
-    // allows sidebar to scroll to the bottom when the composer is open
-    margin-bottom: var(--composer-height);
-    padding-bottom: var(--composer-ipad-padding);
-  }
-
-  .sidebar-sections {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    flex: 1;
-    padding: 1em 0 0;
-    max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth));
-    background-color: var(--primary-very-low);
   }
 }
 

app/assets/stylesheets/desktop/discourse.scss

@@ -195,7 +195,7 @@ body.has-sidebar-page {
 
   #main-outlet-wrapper {
     grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
-    gap: 0 0.5em;
+    gap: 0 1em;
     padding-left: 0;
   }
 }