From 03a599f457967421814cbfc45d7ff410cad5dae1 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 24 Aug 2022 13:26:25 -0400
Subject: [PATCH] UX: revert sidebar scrollbar repositioning (#18076)

---
 .../discourse/app/components/sidebar.hbs      | 13 ++++-----
 .../components/sidebar/hamburger-dropdown.hbs |  1 +
 .../app/components/sidebar/user/sections.hbs  |  1 -
 .../common/base/sidebar-footer.scss           |  2 --
 .../stylesheets/common/base/sidebar.scss      | 29 ++++++++-----------
 app/assets/stylesheets/desktop/discourse.scss |  2 +-
 6 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar.hbs b/app/assets/javascripts/discourse/app/components/sidebar.hbs
index 02dd1a2c6ae..6de60c3aceb 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar.hbs
+++ b/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}}
-      <Sidebar::User::Sections @collapsableSections={{true}}/>
-    {{else}}
-      <Sidebar::Anonymous::Sections />
-    {{/if}}
-  </div>
+  {{#if this.currentUser}}
+    <Sidebar::User::Sections @collapsableSections={{true}}/>
+  {{else}}
+    <Sidebar::Anonymous::Sections />
+  {{/if}}
+  <Sidebar::Footer />
 </DSection>
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs
index 0e39e35a7db..62778452301 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
index 84fcd5ef099..47044fd4e95 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs
@@ -45,5 +45,4 @@
       {{/each}}
     </Sidebar::Section>
   {{/each}}
-  <Sidebar::Footer />
 </div>
diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss
index d1bb98b2737..5cf9f34f124 100644
--- a/app/assets/stylesheets/common/base/sidebar-footer.scss
+++ b/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;
 
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 366ae8f3cb4..9f43cc8d8df 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/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);
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 3de3460038f..780aa903ef5 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/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;
   }
 }