From e04069cf0d94d54cf7fecec3ffd435997a48e846 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 5 Jan 2022 14:09:25 -0500
Subject: [PATCH] FIX: Jittery topic progress on some window sizes (#15462)

---
 .../app/components/topic-progress.js          | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-progress.js b/app/assets/javascripts/discourse/app/components/topic-progress.js
index 41ff05f96bf..12d6d40b341 100644
--- a/app/assets/javascripts/discourse/app/components/topic-progress.js
+++ b/app/assets/javascripts/discourse/app/components/topic-progress.js
@@ -159,22 +159,35 @@ export default Component.extend({
       return;
     }
 
+    const composerH =
+      document.querySelector("#reply-control")?.clientHeight || 0;
+
+    // on desktop, pin this element to the composer
+    // otherwise the grid layout will change too much when toggling the composer
+    // and jitter when the viewport is near the topic bottom
+    if (!this.site.mobileView && composerH) {
+      this.set("docked", false);
+      this.element.style.setProperty("bottom", `${composerH}px`);
+      return;
+    }
+
     if (entries[0].isIntersecting === true) {
       this.set("docked", true);
+      this.element.style.removeProperty("bottom");
     } else {
       if (entries[0].boundingClientRect.top > 0) {
         this.set("docked", false);
-        const wrapper = document.querySelector("#topic-progress-wrapper");
-        const composerH =
-          document.querySelector("#reply-control")?.clientHeight || 0;
         if (composerH === 0) {
           const filteredPostsHeight =
             document.querySelector(".posts-filtered-notice")?.clientHeight || 0;
           filteredPostsHeight === 0
-            ? wrapper.style.removeProperty("bottom")
-            : wrapper.style.setProperty("bottom", `${filteredPostsHeight}px`);
+            ? this.element.style.removeProperty("bottom")
+            : this.element.style.setProperty(
+                "bottom",
+                `${filteredPostsHeight}px`
+              );
         } else {
-          wrapper.style.setProperty("bottom", `${composerH}px`);
+          this.element.style.setProperty("bottom", `${composerH}px`);
         }
       }
     }