Keep the panel rails still when a tall panel opens

A tall panel moves its stack to the focus or tail layout, and the rail
inside the stack went with it, so the Data Layers and Authoring buttons
jumped up and the right rail followed. Each layout pass now offsets the
rail back to the resting top, with the same transition as the stack, and
the right rail lines up with the left rail's buttons. Cyber pins the left
stack's top, so it flags that and the rail takes no offset.

src/ui/leftPanelRail.js

@@ -59,6 +59,7 @@ export function layoutLeftPanelRail({
     stack.style.removeProperty('--left-stack-safe-top');
     stack.style.removeProperty('--left-stack-safe-bottom');
     stack.style.removeProperty('--left-stack-centered-height');
+    stack.style.removeProperty('--panel-rail-offset');
     stack.classList.remove('layout-exclusive');
     stack.dataset.layoutMode = 'mobile';
     settleSideAccordion({ panels, enabled: false, onCollapse });
@@ -275,6 +276,16 @@ export function layoutLeftPanelRail({
   ) {
     stack.style.setProperty('--left-stack-safe-bottom', bottomValue);
   }
+  // The rail stays where the resting stack puts it; only the panels move.
+  // A theme that pins the stack's top (Cyber) leaves nothing to offset.
+  const topPinned =
+    getComputedStyle(stack)
+      .getPropertyValue?.('--panel-stack-top-pinned')
+      ?.trim() === '1';
+  const railOffset = `${(topPinned ? 0 : safeTop - layoutTop).toFixed(1)}px`;
+  if (stack.style.getPropertyValue('--panel-rail-offset') !== railOffset) {
+    stack.style.setProperty('--panel-rail-offset', railOffset);
+  }
   stack.style.removeProperty('--left-stack-centered-height');
   for (const panel of panels)
     panel.style.removeProperty('--left-panel-allocated-height');

src/ui/panelRails.test.mjs

@@ -349,6 +349,32 @@ test('right rail aligns to the current left rail and excludes hidden obstacles',
   assert.equal(f.stack.dataset.safeTop, '200.0');
 });
 
+// An opened panel moves the left stack up, but its rail buttons hold still:
+// the right rail lines up with those buttons, not with the moved stack.
+test('right rail aligns to the left rail buttons while the left stack is offset', () => {
+  const f = fixture('right');
+  f.options.leftStack.rect.top = 100;
+  f.options.leftStack.style.setProperty('--panel-rail-offset', '186.7px');
+  f.run();
+  assert.equal(f.stack.dataset.safeTop, '286.7');
+});
+
+test('left rail buttons hold still while a tall panel moves the stack', () => {
+  const f = fixture('left');
+  f.expand(f.first, 900);
+  f.run();
+  assert.equal(f.stack.dataset.layoutMode, 'focus');
+  assert.ok(
+    parseFloat(f.stack.style.getPropertyValue('--panel-rail-offset')) > 0,
+  );
+
+  // A theme that pins the stack's top (Cyber) leaves nothing to offset.
+  f.stack.computed.getPropertyValue = (name) =>
+    name === '--panel-stack-top-pinned' ? ' 1' : '';
+  f.run();
+  assert.equal(f.stack.style.getPropertyValue('--panel-rail-offset'), '0.0px');
+});
+
 // The left rail's `top` animates after the right pass runs, and nothing
 // re-runs it when the transition lands: the right rail must read the end value.
 function animatingLeftRail({ keyframes = true } = {}) {

src/ui/rightPanelRail.js

@@ -126,8 +126,11 @@ export function layoutRightPanelRail({
     viewportHeight,
     getComputedStyle,
   );
+  // Align with the left rail's buttons, which hold still while its stack moves.
+  const leftRailOffset =
+    parseFloat(leftStack?.style.getPropertyValue('--panel-rail-offset')) || 0;
   const alignedTop = Number.isFinite(leftStackTop)
-    ? leftStackTop
+    ? leftStackTop + leftRailOffset
     : viewportHeight * 0.26;
   const obstacleRects = [];
 

src/ui/styles/cyber.css

@@ -1654,6 +1654,8 @@
   }
 
   :root[data-ui-theme='cyber'] #left-panel-stack {
+    /* The stack holds still, so its rail needs no offset (leftPanelRail.js). */
+    --panel-stack-top-pinned: 1;
     top: var(--cyber-left-rail-top) !important;
     bottom: calc(2vh + 13rem);
     left: calc(54px + var(--panel-rail-clearance));

src/ui/styles/layers.css

@@ -245,12 +245,15 @@
 }
 
 /* Panel rails (src/ui/panelNavigation.js). Each rail lives inside its stack,
-   so it shows and hides with the stack, and floats in the screen-edge gutter. */
+   so it shows and hides with the stack, and floats in the screen-edge gutter.
+   The stack's layout offsets it back to its resting top, so it holds still
+   when an opened panel moves the stack. */
 .gev-panel-rail {
   position: absolute;
-  top: 0;
+  top: var(--panel-rail-offset, 0px);
   z-index: 1;
   pointer-events: auto;
+  transition: top var(--transition-fast);
 }
 .gev-panel-rail--left {
   right: calc(100% + 6px);