drive top-scrollbar layout() from a single ResizeObserver

Asset/css/shrink-vertically.css

@@ -26,11 +26,19 @@
  * (BoardDragAndDrop.js: css("min-height", parent().height())). In CSS, min-height
  * beats max-height, so that inline value keeps tall columns from shrinking and our
  * max-height alone does nothing. A stylesheet !important overrides the inline
- * (non-important) min-height, so we reset it to 0 and let max-height win.
+ * (non-important) min-height so max-height can win.
+ *
+ * We override it to a NON-ZERO value, not 0: Kanboard relies on that same inline
+ * min-height to keep EMPTY columns tall enough to be a drop target, so zeroing it makes
+ * you unable to drop a card into an empty collapsed column. 250px gives a comfortable drop
+ * target (well above Kanboard's 70px .draggable-placeholder) while staying below the
+ * collapsed max-height, so the board never overflows the viewport (which would re-hide the
+ * horizontal scrollbar). Non-empty columns are unaffected -- their content is taller -- and
+ * short columns simply get this min-height, which is only cosmetic (no scrollbar).
  */
 #board td .board-task-list.board-task-list-compact {
     max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
-    min-height: 0 !important;
+    min-height: 250px !important;
 }
 
 /*

Asset/js/top-scrollbar.js

@@ -10,6 +10,14 @@
  * track + thumb widget: it renders and behaves the same in every browser (Chrome, Firefox,
  * Safari) and on touch, and its thickness follows the --sv-bar-size setting.
  *
+ * Resilience note: after a card drag Kanboard rebuilds the board with
+ * `$("#board-container").replaceWith(data)` (BoardDragAndDrop.refresh), so the element we
+ * started with is destroyed and replaced. We therefore never cache the container: we
+ * re-resolve it on every use, listen for its scroll on `document` in the capture phase (so
+ * the listener survives the swap), and observe the STABLE parent (which is not replaced) so
+ * the widget keeps working -- previously the observer and scroll listener died with the old
+ * element, which froze the bar and lost sync after each move.
+ *
  * Loaded only when the "Add a top horizontal scrollbar" setting is enabled.
  */
 (function () {
@@ -18,14 +26,25 @@
     // 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");
+    }
+
     function init() {
-        var container = document.getElementById("board-container");
+        var container = getContainer();
 
         // Only on the board, and never add it twice.
         if (!container || document.querySelector(".sv-top-scroll")) {
             return;
         }
 
+        // The parent survives the board refresh (only #board-container is replaced).
+        var boardParent = container.parentNode;
+
         var track = document.createElement("div");
         track.className = "sv-top-scroll";
 
@@ -33,16 +52,21 @@
         thumb.className = "sv-top-scroll-thumb";
         track.appendChild(thumb);
 
-        container.parentNode.insertBefore(track, container);
+        boardParent.insertBefore(track, container);
 
         var dragging = false;
         var dragStartX = 0;
         var dragStartScrollLeft = 0;
 
         function metrics() {
+            var c = getContainer();
+            if (!c) {
+                return null;
+            }
             return {
-                viewport: container.clientWidth,
+                c: c,
-                content: container.scrollWidth,
+                viewport: c.clientWidth,
+                content: c.scrollWidth,
                 trackW: track.clientWidth
             };
         }
@@ -50,21 +74,33 @@
         function positionThumb(m, thumbW) {
             var maxScroll = m.content - m.viewport;
             var maxThumb = m.trackW - thumbW;
-            var left = maxScroll > 0 ? (container.scrollLeft / maxScroll) * maxThumb : 0;
+            var left = maxScroll > 0 ? (m.c.scrollLeft / maxScroll) * maxThumb : 0;
             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.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; }
@@ -73,21 +109,34 @@
             positionThumb(m, thumbW);
         }
 
-        // Board scrolled by any other means -> keep the thumb in sync.
+        // Keep the track directly before the (current) container after a board refresh.
-        container.addEventListener("scroll", function () {
+        function reattachTrack() {
+            var c = getContainer();
+            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
+        // document catches #board-container's (non-bubbling) scroll and survives the swap.
+        document.addEventListener("scroll", function (e) {
             if (dragging) { return; }
+            if (e.target !== getContainer()) { return; }
             var m = metrics();
-            if (m.content <= m.viewport) { return; }
+            if (!needsScroll(m)) { return; }
             positionThumb(m, thumb.offsetWidth);
-        });
+        }, true);
 
         // Drag the thumb (mouse + touch via Pointer Events).
         thumb.addEventListener("pointerdown", function (e) {
+            var c = getContainer();
+            if (!c) { return; }
             e.preventDefault();
             e.stopPropagation();
             dragging = true;
             dragStartX = e.clientX;
-            dragStartScrollLeft = container.scrollLeft;
+            dragStartScrollLeft = c.scrollLeft;
             track.classList.add("sv-dragging");
             if (thumb.setPointerCapture) {
                 thumb.setPointerCapture(e.pointerId);
@@ -97,10 +146,11 @@
         thumb.addEventListener("pointermove", function (e) {
             if (!dragging) { return; }
             var m = metrics();
+            if (!m) { return; }
             var maxThumb = m.trackW - thumb.offsetWidth;
             var maxScroll = m.content - m.viewport;
             if (maxThumb <= 0) { return; }
-            container.scrollLeft = dragStartScrollLeft + (e.clientX - dragStartX) * (maxScroll / maxThumb);
+            m.c.scrollLeft = dragStartScrollLeft + (e.clientX - dragStartX) * (maxScroll / maxThumb);
             positionThumb(m, thumb.offsetWidth);
         });
 
@@ -120,7 +170,7 @@
         track.addEventListener("pointerdown", function (e) {
             if (e.target === thumb || dragging) { return; }
             var m = metrics();
-            if (m.content <= m.viewport) { return; }
+            if (!needsScroll(m)) { return; }
 
             var thumbW = thumb.offsetWidth;
             var maxThumb = m.trackW - thumbW;
@@ -132,18 +182,52 @@
             if (targetLeft < 0) { targetLeft = 0; }
             if (targetLeft > maxThumb) { targetLeft = maxThumb; }
 
-            container.scrollLeft = (targetLeft / maxThumb) * maxScroll;
+            m.c.scrollLeft = (targetLeft / maxThumb) * maxScroll;
             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;
 
-        // The board can be redrawn by AJAX polling / drag-and-drop; keep sizes current.
+        function observeSizes() {
-        if (window.MutationObserver) {
+            if (!sizeObserver) {
-            new MutationObserver(layout).observe(container, { childList: true, subtree: true });
+                layout();
+                return;
+            }
+
+            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;
+            }
         }
 
-        layout();
+        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.4.0';
+        return '1.5.1';
     }
 
     public function getPluginHomepage()

VERSION

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