observatory: push-mode sidebar + natural compare-mode column widths

The left panel was a `position: fixed` overlay (300 px wide, covering the
main graph area when open). Two issues:

1. **Overlay blocked the graph.** Sidebar slid in over the main panel via
   `transform: translateX(-100%)` → `translateX(0)`, never affecting layout.
2. **Compare-mode columns were squeezed.** `grid-template-columns:
   repeat(N, 1fr)` divided the fixed 300 px equally, making N-archive
   columns unreadably narrow.

Fix:

* **Push layout.** `.index-pane` moves from `position: fixed` to an
  in-flow flex child of `.container`. Closed state: `width: 0;
  overflow: hidden`. Open state: `width: var(--sidebar-w)` (driven by JS).
  `.main-pane` is the second flex child and naturally gets the remaining
  width, so the main area shrinks/grows as the sidebar opens/closes.

* **Dynamic sidebar width via CSS variable.** JS sets `--sidebar-w` on
  `:root` at toggle time and on `renderIndex` when the archive count changes
  (single archive: 300 px; N archives: N × 200 px, capped at 50 vw).
  The `sidebar-toggle-btn` reads `left: var(--sidebar-w, 0)` so it always
  sits at the sidebar's right edge with no JS positional update.

* **Natural column widths.** `grid-template-columns` changes from
  `repeat(N, minmax(0, 1fr))` to `repeat(N, 200px)` with `overflow-x: auto`
  on the grid container. Each archive column is 200 px; the panel expands
  to accommodate all of them.

* **Hover-to-peek removed.** `.index-pane-trigger` (the invisible fixed
  strip that revealed the sidebar on hover) is removed from the HTML and
  hidden via CSS. It served the overlay model; in push mode it would
  unexpectedly push the main content aside on every mouse-near-edge hover.

Verified: push mode (`mainLeft === sidebarWidth`), `--sidebar-w` driven
correctly for single/compare archives, 98 observatory tests pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: quic-boyuc

devtools/observatory/templates/css/main.css

@@ -143,7 +143,7 @@
         /* Sidebar toggle tab — always-visible click target on left edge */
         .sidebar-toggle-btn {
             position: fixed;
-            left: 0;
+            left: var(--sidebar-w, 0);
             top: 50%;
             transform: translateY(-50%);
             z-index: 210;
@@ -171,7 +171,6 @@
             box-shadow: 3px 0 12px var(--shadow);
             width: 26px;
         }
-        .sidebar-toggle-btn.open { left: 300px; }
         [data-theme="dark"] .sidebar-toggle-btn {
             background: var(--header-bg);
             border-color: rgba(255,255,255,0.15);
@@ -187,48 +186,29 @@
 
         /* Sidebar trigger zone — invisible strip on left edge (hover fallback) */
         .index-pane-trigger {
-            position: fixed;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 12px;
-            z-index: 200;
+            display: none;
         }
 
         /* Index Pane (Sidebar)
-           Starts below the sticky header (z-index: 200) so the index
-           header (which carries Tree-view / Select-items toggles) is
-           never obscured. The pane itself sits at z-index: 199. */
+           In-flow flex child of .container — not a fixed overlay.
+           Width transitions between 0 (closed) and var(--sidebar-w) (open).
+           The toggle button position is driven by the same --sidebar-w variable. */
         .index-pane {
-            position: fixed;
-            left: 0;
-            top: 60px;
-            bottom: 0;
-            width: 300px;
+            flex-shrink: 0;
+            width: 0;
+            overflow: hidden;
             background: var(--bg-secondary);
             border-right: 1px solid var(--border-color);
             display: flex;
             flex-direction: column;
-            flex-shrink: 0;
-            z-index: 199;
-            transform: translateX(-100%);
-            transition: transform 0.25s ease, box-shadow 0.25s ease;
-            box-shadow: none;
-        }
-
-        /* When the sticky header is hidden the pane reclaims the full
-           viewport. */
-        body:has(header.hidden) .index-pane {
-            top: 0;
+            transition: width 0.25s ease;
         }
-
-        /* Show when trigger zone or pane itself is hovered, or pinned open */
-        .index-pane-trigger:hover ~ .index-pane,
-        .index-pane:hover,
         .index-pane.pinned {
-            transform: translateX(0);
-            box-shadow: 4px 0 16px var(--shadow);
+            width: var(--sidebar-w, 300px);
+            overflow-y: auto;
+            overflow-x: hidden;
         }
+        /* header.hidden: full-height is handled by flex; no top offset needed */
 
         .index-header {
             padding: 1rem;
@@ -493,7 +473,8 @@
            the renderer adds the `compare-mode` class. */
         .index-list.compare-mode {
             display: grid;
-            grid-template-columns: repeat(var(--archive-cols, 1), minmax(0, 1fr));
+            grid-template-columns: repeat(var(--archive-cols, 1), 200px);
+            overflow-x: auto;
             gap: 0.5rem;
             padding: 0.5rem;
             align-items: start;

devtools/observatory/templates/js/02_layout.js

@@ -7,6 +7,26 @@
   let sidebarPinned = false;
   try { sidebarPinned = localStorage.getItem('obs_sidebar_pinned') === '1'; } catch(e) {}
 
+  // Width constants for push-layout sidebar.
+  // Single-archive mode uses SIDEBAR_SINGLE_W; compare mode gives each
+  // archive column ARCHIVE_COL_W px, so the panel expands with N archives.
+  const SIDEBAR_SINGLE_W = 300;
+  const ARCHIVE_COL_W    = 200;
+
+  function _sidebarTargetWidth() {
+    const archives = (state.data && state.data.archives) || [];
+    if (archives.length <= 1) return SIDEBAR_SINGLE_W;
+    const natural = archives.length * ARCHIVE_COL_W + (archives.length - 1) * 8 + 16;
+    return Math.min(natural, Math.round(window.innerWidth * 0.5));
+  }
+
+  // Writes --sidebar-w on :root, which drives both .index-pane width and
+  // .sidebar-toggle-btn left via CSS variable.
+  function _applySidebarWidth(open) {
+    const w = open ? _sidebarTargetWidth() : 0;
+    document.documentElement.style.setProperty('--sidebar-w', w + 'px');
+  }
+
   function renderLayout() {
     const icon = state.theme === 'dark' ? '☀️' : '🌙';
     OBS.app.innerHTML = `
@@ -24,7 +44,6 @@
         </div>
       </header>
       <div class="container">
-        <div class="index-pane-trigger"></div>
         <button class="sidebar-toggle-btn ${sidebarPinned ? 'open' : ''}"
                 id="sidebar-toggle-btn"
                 onclick="toggleSidebar()"
@@ -40,6 +59,7 @@
         <main id="main-pane" class="main-pane"></main>
       </div>
     `;
+    _applySidebarWidth(sidebarPinned);
     updateIndexHeader();
   }
 
@@ -49,6 +69,7 @@
 
     const pane = document.getElementById('index-pane');
     const btn  = document.getElementById('sidebar-toggle-btn');
+    _applySidebarWidth(sidebarPinned);
     if (pane) pane.classList.toggle('pinned', sidebarPinned);
     if (btn)  {
       btn.classList.toggle('open', sidebarPinned);
@@ -354,6 +375,9 @@
     if (archives.length > 1) {
       list.classList.add('compare-mode');
       list.style.setProperty('--archive-cols', String(archives.length));
+      // Re-compute panel width if sidebar is already open (archive count may
+      // have changed when loading a compare report).
+      if (sidebarPinned) _applySidebarWidth(true);
       let html = '';
       archives.forEach((archive) => {
         html += _renderArchiveColumn(archive, sessions, records, useTree);
@@ -366,6 +390,7 @@
     // Single-archive: flat list of session dashboards + records.
     list.classList.remove('compare-mode');
     list.style.removeProperty('--archive-cols');
+    if (sidebarPinned) _applySidebarWidth(true);
     let html = '';
     sessions.forEach((session) => {
       html += _renderSessionDashboardLink(session);