drive top-scrollbar layout() from a single ResizeObserver

Asset/js/top-scrollbar.js

@@ -26,6 +26,10 @@
     // Keep the thumb wide enough to grab, even on a very wide board.
     var MIN_THUMB = 24;
 
+    // Ignore a few px of residual overflow (padding / sub-pixel rounding) so a board that visually
+    // fits is treated as "no horizontal scroll" instead of showing an immovable near-full thumb.
+    var FIT_TOLERANCE = 4;
+
     function getContainer() {
         return document.getElementById("board-container");
     }
@@ -74,17 +78,29 @@
             thumb.style.transform = "translateX(" + Math.round(left) + "px)";
         }
 
-        // Recompute thumb width/position; hide the whole bar when nothing to scroll.
+        // The board needs scrolling only if its content exceeds the viewport by more than the
+        // tolerance (absorbs a residual px or two so a fitting board reads as "no scroll").
+        function needsScroll(m) {
+            return m && m.content - m.viewport > FIT_TOLERANCE;
+        }
+
+        // Recompute the thumb. The (light) track stays visible for a STABLE height; when the board
+        // fits, just drop the knob (thumb width 0) so it reads as "nothing to scroll" without the
+        // layout jump that hiding the whole bar would cause.
         function layout() {
             var m = metrics();
 
-            if (!m || m.content <= m.viewport || m.trackW <= 0) {
+            if (!m || m.trackW <= 0) {
-                track.style.display = "none";
                 return;
             }
 
             track.style.display = "";
 
+            if (!needsScroll(m)) {
+                thumb.style.width = "0px";
+                return;
+            }
+
             var thumbW = Math.round(m.trackW * m.viewport / m.content);
             if (thumbW < MIN_THUMB) { thumbW = MIN_THUMB; }
             if (thumbW > m.trackW) { thumbW = m.trackW; }
@@ -99,6 +115,7 @@
             if (c && c.parentNode && track.nextSibling !== c) {
                 c.parentNode.insertBefore(track, c);
             }
+            observeSizes();
         }
 
         // Board scrolled by any other means -> keep the thumb in sync. Capture-phase on
@@ -107,7 +124,7 @@
             if (dragging) { return; }
             if (e.target !== getContainer()) { return; }
             var m = metrics();
-            if (!m || m.content <= m.viewport) { return; }
+            if (!needsScroll(m)) { return; }
             positionThumb(m, thumb.offsetWidth);
         }, true);
 
@@ -153,7 +170,7 @@
         track.addEventListener("pointerdown", function (e) {
             if (e.target === thumb || dragging) { return; }
             var m = metrics();
-            if (!m || m.content <= m.viewport) { return; }
+            if (!needsScroll(m)) { return; }
 
             var thumbW = thumb.offsetWidth;
             var maxThumb = m.trackW - thumbW;
@@ -169,18 +186,48 @@
             positionThumb(m, thumbW);
         });
 
-        window.addEventListener("resize", layout);
+        // Single source of truth for recomputing the thumb: a ResizeObserver on the container
+        // (viewport) and #board (content). It fires exactly when the width settles/changes -- the
+        // right moment -- which also fixes the stale thumb from the first layout() running before the
+        // board finished sizing. Both are replaced on a board refresh, so re-observe the current ones
+        // (from reattachTrack). Without ResizeObserver, fall back to a window resize listener.
+        var sizeObserver = window.ResizeObserver ? new ResizeObserver(function () { layout(); }) : null;
+        var observedContainer = null;
+        var observedBoard = null;
 
-        // Observe the STABLE parent so we keep working after #board-container is replaced by
+        function observeSizes() {
-        // a card move / AJAX polling; re-seat the track and recompute sizes on any change.
+            if (!sizeObserver) {
-        if (window.MutationObserver) {
-            new MutationObserver(function () {
-                reattachTrack();
                 layout();
-            }).observe(boardParent, { childList: true, subtree: true });
+                return;
             }
 
-        layout();
+            var c = getContainer();
+            var b = document.getElementById("board");
+
+            if (c && c !== observedContainer) {
+                if (observedContainer) { sizeObserver.unobserve(observedContainer); }
+                sizeObserver.observe(c);
+                observedContainer = c;
+            }
+
+            if (b && b !== observedBoard) {
+                if (observedBoard) { sizeObserver.unobserve(observedBoard); }
+                sizeObserver.observe(b);
+                observedBoard = b;
+            }
+        }
+
+        if (!sizeObserver) {
+            window.addEventListener("resize", layout);
+        }
+
+        // Re-seat the track and re-observe after #board-container is replaced by a card move / AJAX
+        // polling (we watch the STABLE parent, since the container itself is swapped out).
+        if (window.MutationObserver) {
+            new MutationObserver(reattachTrack).observe(boardParent, { childList: true, subtree: true });
+        }
+
+        observeSizes();
     }
 
     if (document.readyState === "loading") {

Plugin.php

@@ -51,7 +51,7 @@ class Plugin extends Base
 
     public function getPluginVersion()
     {
-        return '1.5.0';
+        return '1.5.1';
     }
 
     public function getPluginHomepage()

VERSION

@@ -1 +1 @@
-ShrinkVertically v1.5
+ShrinkVertically v1.5.1