From be1cbc70823ad2f1c26670714677ff8c9fb667bd Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Mon, 8 May 2023 14:33:24 +1000
Subject: [PATCH] FIX: jumpy more sidebar section (#21430)

Bug introduced in PR https://github.com/discourse/discourse/pull/21398

More section needs to be wrapped in div with position:relative to have sticky and absolute position.
---
 .../components/sidebar/more-section-links.hbs | 25 +++++++++++--------
 .../base/sidebar-more-section-links.scss      |  7 +++++-
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs
index c15a91126cf..b0f3c1b83db 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs
@@ -10,18 +10,21 @@
     @label="sidebar.more"
   />
 </li>
-{{#if this.open}}
-  <div
-    class="sidebar-more-section-links-details-content-wrapper"
-    {{did-insert this.registerClickListener}}
-    {{will-destroy this.unregisterClickListener}}
-  >
 
-    <div class="sidebar-more-section-links-details-content">
-      <div class="sidebar-more-section-links-details-content-main">
-        {{#each this.sectionLinks as |sectionLink|}}
-          <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
-        {{/each}}
+{{#if this.open}}
+  <div class="sidebar-more-section-links-details">
+    <div
+      class="sidebar-more-section-links-details-content-wrapper"
+      {{did-insert this.registerClickListener}}
+      {{will-destroy this.unregisterClickListener}}
+    >
+
+      <div class="sidebar-more-section-links-details-content">
+        <div class="sidebar-more-section-links-details-content-main">
+          {{#each this.sectionLinks as |sectionLink|}}
+            <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
+          {{/each}}
+        </div>
       </div>
     </div>
   </div>
diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
index 8c61996cd78..44a672f84db 100644
--- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
+++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
@@ -35,9 +35,14 @@
     padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3);
   }
 }
+.sidebar-more-section-links-details-content-main {
+  position: sticky;
+}
 .sidebar-more-section-links-details-content-wrapper {
   position: absolute;
   width: 100%;
   z-index: z("modal", "content") + 1;
-  position: sticky;
+}
+.sidebar-more-section-links-details {
+  position: relative;
 }