Merge pull request #918 from kvnloo/fix/right-rail-css-hidden-panel-20261003

fix(ui): ignore CSS-hidden panels in right rail layout

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+- The right rail ignores panels that other CSS hides, such as during an event
+  view, so they no longer force one-panel-at-a-time layout or collapse visible
+  panels. Panels the rail collapses itself are still restored.
+
 - Coordinate searches refuse empty latitude or longitude components instead of navigating to an unintended location.
 
 - Bing Aerial and Bing Labels request HTTPS tiles on HTTP localhost through

docs/CURRENT-STATE.md

@@ -1047,6 +1047,9 @@ Automatic collapse remains presentation only, prioritizes the latest explicit
 panel, and honors keyboard focus on the right. Mobile layout still releases
 desktop allocation styles. Stable Display allocation avoids unnecessary style
 writes. This extraction does not change panel positions or layout defaults.
+The right rail skips panels hidden by other CSS (computed `display: none`), but
+keeps the collapsed panels its own exclusive presentation hides, so automatic
+collapse can still be undone.
 
 ## Surface keyboard lifecycle
 

src/ui/panelRails.test.mjs

@@ -704,6 +704,51 @@ test('narrow-screen rails pin every hosted panel glow inside its panel box', ()
   }
 });
 
+test('right layout ignores a CSS-hidden expanded panel when deciding exclusivity', () => {
+  const f = fixture('right');
+  const weather = element('weather-panel', { height: 300 });
+  weather.computed.display = 'none';
+  f.stack.children.push(weather);
+  weather.parentElement = f.stack;
+
+  f.run();
+
+  assert.equal(f.stack.classList.contains('layout-exclusive'), false);
+  assert.equal(f.stack.dataset.expandedCount, '0');
+  assert.equal(f.first.getAttribute('aria-hidden'), undefined);
+  assert.equal(f.second.getAttribute('aria-hidden'), undefined);
+  assert.equal(
+    weather.style.getPropertyValue('--right-panel-allocated-height'),
+    '',
+  );
+});
+
+test('right layout still restores panels that exclusive presentation hides', () => {
+  const f = fixture('right');
+  // Model layers.css: an exclusive rail hides its collapsed panels.
+  f.options.windowRef.getComputedStyle = (node) => ({
+    ...node.computed,
+    display:
+      f.stack.classList.contains('layout-exclusive') &&
+      node.classList.contains('collapsed')
+        ? 'none'
+        : node.computed.display,
+  });
+  f.expand(f.first, 250);
+  f.second.classList.add('layout-auto-collapsed');
+  f.stack.classList.add('layout-exclusive');
+
+  f.run();
+  assert.equal(f.stack.classList.contains('layout-exclusive'), true);
+  assert.equal(f.second.getAttribute('aria-hidden'), 'true');
+
+  f.options.hud.visible = false;
+  f.run();
+  assert.equal(f.second.classList.contains('collapsed'), false);
+  assert.equal(f.second.classList.contains('layout-auto-collapsed'), false);
+  assert.deepEqual(f.collapsed, ['second']);
+});
+
 test('right layout ignores a hidden panel: no lane, no gap, no auto-collapse', () => {
   const f = fixture('right');
   const imagery = element('recent-imagery-panel', { height: 0 });

src/ui/rightPanelRail.js

@@ -69,10 +69,17 @@ export function layoutRightPanelRail({
   // A collapse may schedule one follow-up, which only measures and allocates.
   const isCollapseRetry = pendingCollapseRetries.delete(stack);
 
-  // A floating (lifted-out) panel is not laid out by the rail.
+  // A floating (lifted-out) panel is not laid out by the rail. Neither is one
+  // that other CSS hides, such as an event view. Exclusive presentation hides
+  // collapsed panels itself; those stay in the rail so they can be restored.
+  const hiddenByRail = (panel) =>
+    stack.classList.contains('layout-exclusive') &&
+    panel.classList.contains('collapsed');
   const panels = [...stack.children].filter(
     (panel) =>
-      panel.matches('[data-panel-id]:not(.panel-floating)') && !panel.hidden,
+      panel.matches('[data-panel-id]:not(.panel-floating)') &&
+      !panel.hidden &&
+      (hiddenByRail(panel) || getComputedStyle(panel).display !== 'none'),
   );
   if (!hud.visible || hud.variant !== 'tactical') {
     for (const panel of panels.filter((item) =>