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 <[email protected]>

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);