From 4debb49fe07ef90758907a9ae8257187c03424ff Mon Sep 17 00:00:00 2001
From: Manjunath Paparaju <manjunath@halfpixel.ai>
Date: Fri, 13 Nov 2026 16:13:26 +0530
Subject: [PATCH] Place a rail's highlight again whenever the rail changes size

The highlight was placed only when an item was pressed or released, the
window resized, or the pointer moved through an edge strip. A rail hidden
and shown again (Context docked and undocked) was left with its open item
unmarked, and a rail turned from a column to a row (panels moved to the
screen edge) kept its highlight where the icon had been. Each rail is now
watched for size changes, and its highlight placed again when it changes.

Co-authored-by: Sameh Khamis <sameh@halfpixel.ai>
---
 src/ui/railEdgeScroll.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/ui/railEdgeScroll.js b/src/ui/railEdgeScroll.js
index 2a7a606c6..de3c2e39a 100644
--- a/src/ui/railEdgeScroll.js
+++ b/src/ui/railEdgeScroll.js
@@ -105,6 +105,7 @@ export function installRailEdgeScroll(doc = globalThis.document) {
     win.cancelAnimationFrame(frame);
     let left = frames;
     const tick = () => {
+      watchRails();
       doc.querySelectorAll('.ui-rail').forEach(glide);
       if ((left -= 1) > 0) frame = win.requestAnimationFrame(tick);
     };
@@ -126,6 +127,23 @@ export function installRailEdgeScroll(doc = globalThis.document) {
     attributeFilter: ['aria-pressed'],
   });
 
+  // A rail also changes shape with nothing pressed or released: hidden and
+  // shown again (Context docked and undocked), or turned from a column to a
+  // row (panels moved to the screen edge). Its highlight is placed again
+  // whenever its size changes, so it is never left where an icon was.
+  const sized =
+    typeof win.ResizeObserver === 'function' ? new win.ResizeObserver(() => follow(2)) : null;
+  const watched = new WeakSet();
+  const watchRails = () => {
+    if (!sized) return;
+    doc.querySelectorAll('.ui-rail').forEach((rail) => {
+      if (watched.has(rail)) return;
+      watched.add(rail);
+      sized.observe(rail);
+    });
+  };
+  watchRails();
+
   // ── The edge strip ──
   /** The rail whose strip holds the point, unless a control there owns it. */
   function railAt(x, target) {
@@ -279,6 +297,7 @@ export function installRailEdgeScroll(doc = globalThis.document) {
     win.clearTimeout(heldStep);
     setHot(null);
     observer?.disconnect();
+    sized?.disconnect();
     win.cancelAnimationFrame(frame);
     doc.removeEventListener('pointermove', onMove);
     doc.removeEventListener('pointerout', onLeave);