fix(packets): resolve --surface undefined + z-index scale + path chip re-measure + +N popover (#1128) (#1131)

## Summary Resolves the **5 layout bugs** documented in `specs/packets-layout-audit.md` from the issue investigation. All fixes shipped in one PR per the audit's recommended fix order. Fixes #1128 ### Bug 4 (P0, 1 line) — `--surface` undefined `var(--surface)` was referenced in **8** rules across `style.css` (`.fux-saved-menu`, `.fux-popover`, `.path-popover`, `.fux-ac-dropdown`, `.fux-ctx-menu`, `.path-overflow-pill:hover`, `.fux-saved-trigger:hover`, `.fux-popover-header sticky`) but the variable was **never defined** — every caller resolved to `transparent` and row content bled through. Aliased `--surface: var(--surface-1);` in the `:root`, `@media (prefers-color-scheme: dark)`, and `[data-theme="dark"]` blocks. ### Z-index scale (foundational) Added documented custom properties at the top of `style.css`: ```css --z-base: 0; --z-dropdown: 100; --z-popover: 300; --z-modal-backdrop: 9000; --z-modal: 9100; --z-tooltip: 9200; ``` New code uses these tokens. Existing working values left in place to avoid behavioural risk. ### Bug 1 — path chip re-measure `_finalizePathOverflow` runs **before** `hop-resolver` mutates chip text from hex prefix → longer node name. Chips that fit on first measurement overflow once names resolve, but the `+N` pill never gets appended. Cleared the per-host `overflowChecked` guard and re-ran finalize on a 120 ms debounced timer, so post-resolution overflow is detected. ### Bug 2 — `+N` popover position + z-index `.path-popover` was `z-index: 10500` (above the modal stack) and only ever positioned **below** the pill — when near the bottom of the viewport it hung over adjacent rows. Lowered to `var(--z-popover)` (300), capped `max-height` from `60vh` → `240px`, and added flip-above logic when there isn't room below. ### Bug 3 — filter-bar gap + multi-select truncation `.filter-bar { row-gap: 6px }` was too tight for the 34px controls; bumped to `12px`. `.multi-select-trigger` had no `max-width`, so a selection like `"TRACE,MULTIPART,GRP_TXT"` ballooned the row and overlapped toolbar buttons. Capped `max-width: 180px` with `text-overflow: ellipsis` and surfaced the full selection in the trigger's `title` attribute (so the value remains discoverable). ### Bug 5 — already addressed in #1124 Verified `.filter-group` structure prevents mid-cluster wrap; no further change needed here. ## TDD Branch shows the required **red → green** sequence: | commit | result | |---|---| | `8ad6394` test(packets): red E2E for issue #1128 layout chaos | ✗ Bug 4 (alpha=0), ✗ Bug 2 (z=10500), ✗ Bug 3 (gap=6) | | `eacadc1` fix(packets): resolve --surface undefined + z-index scale + ... | ✓ 5/5 | Test file: `test-issue-1128-packets-layout-e2e.js` — asserts opaque dropdown background, every overflowing `.path-hops` has a `+N` pill, popover z-index ≤ 9000 + anchored to pill, filter-bar gap ≥ 10px, trigger `max-width` bounded. ## E2E Local run against the e2e fixture: ``` === #1128 packets layout E2E === ✓ navigate to /packets and wait for table + rows ✓ Bug 4: Saved-filter dropdown background is OPAQUE (alpha ≥ 0.99) ✓ Bug 1: every overflowing .path-hops has a .path-overflow-pill ✓ Bug 2: +N popover anchored to pill + z-index ≤ 9000 ✓ Bug 3: .filter-bar row-gap ≥ 10px AND .multi-select-trigger has bounded max-width === Results: passed 5 failed 0 === ``` CI hookup: please add `node test-issue-1128-packets-layout-e2e.js` alongside the other `test-issue-XXXX-*-e2e.js` invocations in `.github/workflows/deploy.yml` (line ~226). ## Files - `public/style.css` — `--surface` definition × 3 blocks, z-index scale tokens, `.path-popover`, `.filter-bar`, `.multi-select-trigger` - `public/packets.js` — flip-above popover logic, debounced re-finalize, trigger `title` - `test-issue-1128-packets-layout-e2e.js` — new E2E (red → green) --------- Co-authored-by: openclaw-bot <bot@openclaw.local> Co-authored-by: Kpa-clawbot <kpa-clawbot@users.noreply.github.com>
2026-08-29 05:38:38 +00:00 · 2026-05-05 19:19:19 -07:00
parent 6b9154df3a
commit b03ef4abd3
4 changed files with 321 additions and 14 deletions
@@ -224,6 +224,7 @@ jobs:
          BASE_URL=http://localhost:13581 node test-channel-fluid-e2e.js 2>&1 | tee -a e2e-output.txt
          BASE_URL=http://localhost:13581 node test-table-fluid-e2e.js 2>&1 | tee -a e2e-output.txt
          BASE_URL=http://localhost:13581 node test-issue-1122-packets-filter-ux-e2e.js 2>&1 | tee -a e2e-output.txt
+          BASE_URL=http://localhost:13581 node test-issue-1128-packets-layout-e2e.js 2>&1 | tee -a e2e-output.txt

      - name: Collect frontend coverage (parallel)
        if: success() && github.event_name == 'push'
@@ -1181,13 +1181,20 @@
    }
    function updateTypeTrigger() {
      const total = Object.keys(typeMap).length;
+      // #1128 (Bug 3): trigger has bounded max-width so long selections like
+      // "TRACE,MULTIPART,GRP_TXT" get ellipsised. Always set the full label
+      // as the `title` attribute so the user can recover it via tooltip.
+      const fullList = [...selectedTypes].map(k => typeMap[k] || k).join(', ');
      if (selectedTypes.size === 0 || selectedTypes.size === total) {
        typeTrigger.textContent = 'All Types ▾';
+        typeTrigger.title = 'Filter by packet type';
      } else if (selectedTypes.size === 1) {
        const k = [...selectedTypes][0];
        typeTrigger.textContent = (typeMap[k] || k) + ' ▾';
+        typeTrigger.title = 'Selected: ' + fullList;
      } else {
        typeTrigger.textContent = selectedTypes.size + ' Types ▾';
+        typeTrigger.title = 'Selected: ' + fullList;
      }
    }
    buildTypeMenu();
@@ -1853,6 +1860,12 @@
      }
      if (window.__PERF_LOG_RENDER) console.log('[perf] renderVisibleRows: full rebuild %d entries, %.2fms', endIdx - startIdx, performance.now() - _rvr_t0);
      _finalizePathOverflow(tbody);
+      // #1128 (Bug 1): hop-resolver mutates chip text from hex prefix to a
+      // longer node name AFTER the initial finalize pass — chips that fit at
+      // first measurement overflow once names resolve, but no `+N` pill gets
+      // appended. Cheapest correct fix: re-measure on a delayed pass, after
+      // clearing the per-host `overflowChecked` guard so the recheck runs.
+      _scheduleReFinalizePathOverflow(tbody);
      return;
    }

@@ -1887,6 +1900,7 @@
    }
    if (window.__PERF_LOG_RENDER) console.log('[perf] renderVisibleRows: incremental head=%d tail=%d, %.2fms', headRowCount, tailRowCount, performance.now() - _rvr_t0);
    _finalizePathOverflow(tbody);
+    _scheduleReFinalizePathOverflow(tbody);
  }

  // #1124 (MAJOR-1): when path chips overflow `.path-hops` (capped at 22px /
@@ -1928,6 +1942,48 @@
    }
  }

+  // #1128 (Bug 1): re-run overflow finalize after hop-resolver async pass has
+  // had a chance to mutate chip text. Per-tbody so concurrent renders in
+  // different tbodies don't cancel each other (#1131 BLOCKER-2). Uses a
+  // MutationObserver bonded to the tbody to detect when hop-resolver finishes
+  // mutating .path-hops chip text, then runs finalize once mutations settle
+  // for 50ms — replaces the previous 120ms blind timeout, which regressed on
+  // slow networks where the resolver took longer than 120ms (#1131 MAJOR-1).
+  function _scheduleReFinalizePathOverflow(tbody) {
+    if (!tbody) return;
+    // If a quiesce timer is already armed for this tbody, leave it; new
+    // mutations will keep extending it. If an observer is already wired,
+    // we're done — it'll fire again on the next mutation.
+    if (tbody._rePathOverflowObserver) return;
+    var quiesceTimer = null;
+    var stopTimer = null;
+    function finalize() {
+      if (tbody._rePathOverflowObserver) {
+        try { tbody._rePathOverflowObserver.disconnect(); } catch (_e) {}
+        tbody._rePathOverflowObserver = null;
+      }
+      if (stopTimer) { clearTimeout(stopTimer); stopTimer = null; }
+      var hosts = tbody.querySelectorAll('.path-hops');
+      for (var i = 0; i < hosts.length; i++) hosts[i].dataset.overflowChecked = '';
+      _finalizePathOverflow(tbody);
+    }
+    if (typeof MutationObserver === 'function') {
+      var obs = new MutationObserver(function () {
+        if (quiesceTimer) clearTimeout(quiesceTimer);
+        quiesceTimer = setTimeout(finalize, 50);
+      });
+      obs.observe(tbody, { subtree: true, childList: true, characterData: true });
+      tbody._rePathOverflowObserver = obs;
+      // Hard upper bound — if hop-resolver never mutates (e.g. all chips
+      // already final), still run finalize once after a short delay so the
+      // overflow pill appears.
+      stopTimer = setTimeout(finalize, 1000);
+    } else {
+      // Fallback for environments without MutationObserver.
+      setTimeout(finalize, 120);
+    }
+  }
+
  // Delegated click for path overflow pills — show popover of full path.
  function _wirePathOverflowPopover() {
    if (window.__pathOverflowWired) return;
@@ -1962,8 +2018,18 @@
      pop.innerHTML = inner;
      document.body.appendChild(pop);
      var r = pill.getBoundingClientRect();
-      // Position below the pill, kept inside viewport.
-      var top = window.scrollY + r.bottom + 4;
+      // #1128 (Bug 2): position below by default, but flip ABOVE when there
+      // isn't enough room — keeps the popover anchored to the pill instead of
+      // hanging arbitrarily over adjacent rows / off-screen.
+      var pr0 = pop.getBoundingClientRect();
+      var popH = pr0.height;
+      var roomBelow = window.innerHeight - r.bottom;
+      var top;
+      if (roomBelow < popH + 12 && r.top > popH + 12) {
+        top = window.scrollY + r.top - popH - 4;
+      } else {
+        top = window.scrollY + r.bottom + 4;
+      }
      var left = window.scrollX + r.left;
      pop.style.top = top + 'px';
      pop.style.left = left + 'px';
@@ -1,5 +1,29 @@
 /* === CoreScope — style.css === */

+/* ============================================================
+ * Z-INDEX SCALE (single source of truth — issues #1128, #1131)
+ * ------------------------------------------------------------
+ * Use these tokens for ANY new stacking context. Raw z-index
+ * literals in this file are legacy and being migrated. When
+ * touching a rule with a literal z-index, replace it with the
+ * appropriate token below.
+ *
+ *   --z-base            0     document base, table cells
+ *   --z-dropdown        100   in-flow dropdowns (multi-select,
+ *                             saved-filters, column-toggles)
+ *   --z-popover         300   popovers anchored to a dropdown
+ *                             or table cell (path overflow,
+ *                             autocomplete row detail)
+ *   --z-modal-backdrop  9000  full-viewport modal scrim
+ *   --z-modal           9100  modal panels themselves
+ *   --z-tooltip         9200  tooltips, ctx menus, hover popovers
+ *                             that must float above modals
+ *
+ * Migration policy: do NOT bulk-rewrite legacy values that
+ * currently work — risk/reward is poor. Migrate opportunistically
+ * when editing nearby rules. New rules MUST use the tokens.
+ * ============================================================ */
+
 /* ============================================================
 * FLUID SCAFFOLDING (issue #1054)
 * ------------------------------------------------------------
@@ -85,10 +109,30 @@
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #ffffff;
+  /* #1128 (Bug 4): `--surface` was referenced in 8+ rules (.fux-saved-menu,
+   * .fux-popover, .path-popover, .fux-ac-dropdown, .fux-ctx-menu, ...) but
+   * never defined → backgrounds resolved transparent → row content bled
+   * through dropdowns. Alias it to the opaque card surface. */
+  --surface: var(--surface-1);
  --content-bg: var(--surface-0);
  --card-bg: var(--surface-1);
  --hover-bg: rgba(0,0,0, 0.04);
  --trace-ghost-color: #94a3b8;
+
+  /* #1128: documented z-index scale. Use these custom props for any new
+   * stacking context decision. Existing legacy z-index values that work are
+   * left in place to avoid behavioural risk; new code must use these tokens.
+   *   --z-base       0   document base, table cells
+   *   --z-dropdown   100 in-flow dropdowns (multi-select, saved, columns)
+   *   --z-popover    300 popovers anchored to dropdowns / cells
+   *   --z-modal-backdrop 9000 / --z-modal 9100 / --z-tooltip 9200
+   */
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-popover: 300;
+  --z-modal-backdrop: 9000;
+  --z-modal: 9100;
+  --z-tooltip: 9200;
 }

 /* ⚠️ DARK THEME VARIABLES — KEEP BOTH BLOCKS IN SYNC
@@ -109,6 +153,7 @@
    --surface-1: #1a1a2e;
    --surface-2: #232340;
    --surface-3: #2d2d50;
+    --surface: var(--surface-1);
    --content-bg: var(--surface-0);
    --card-bg: var(--surface-1);
    --text: #e2e8f0;
@@ -138,6 +183,7 @@
  --surface-1: #1a1a2e;
  --surface-2: #232340;
  --surface-3: #2d2d50;
+  --surface: var(--surface-1);
  --content-bg: var(--surface-0);
  --card-bg: var(--surface-1);
  --text: #e2e8f0;
@@ -523,7 +569,7 @@ input[type="week"] {
 * so the visual seam between groups stays readable even when wrapped. */
 .filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center;
-  row-gap: 6px;
+  row-gap: 12px;
 }
 .filter-bar input, .filter-bar select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
@@ -1742,7 +1788,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 .hash-cell-possible { background: var(--status-yellow); color: #fff; }
 .hash-cell-collision { color: #fff; }
 .hash-matrix-tooltip {
-  position: fixed; z-index: 9999; background: var(--surface-1); border: 1px solid var(--border);
+  position: fixed; z-index: var(--z-tooltip); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); padding: 8px 12px;
  font-size: 12px; min-width: 160px; max-width: 260px; pointer-events: none;
 }
@@ -1919,7 +1965,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 .hop-conflict-btn { background: var(--status-yellow, #f59e0b); color: #000; border: none; border-radius: 4px; font-size: 11px;
  font-weight: 700; padding: 1px 5px; cursor: pointer; vertical-align: middle; margin-left: 3px; line-height: 1.2; }
 .hop-conflict-btn:hover { background: var(--status-yellow, #d97706); filter: brightness(0.85); }
-.hop-conflict-popover { position: absolute; z-index: 9999; background: var(--surface-1); border: 1px solid var(--border);
+.hop-conflict-popover { position: absolute; z-index: var(--z-tooltip); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); width: 260px; max-height: 300px; overflow-y: auto; }
 .hop-conflict-header { padding: 10px 12px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--border);
  color: var(--text-muted); }
@@ -2278,6 +2324,12 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
  font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border);
  background: var(--input-bg); color: var(--text); transition: all 0.15s;
  height: 34px; box-sizing: border-box; white-space: nowrap; line-height: 1;
+  /* #1128 (Bug 3): cap trigger width so a long selection like
+   * "TRACE,MULTIPART,GRP_TXT" doesn't balloon the row and overlap toolbar
+   * buttons. The full label remains accessible via the title tooltip.
+   * #1131 MAJOR-4: use clamp() so the cap scales with viewport width
+   * instead of being a hard 180px on every screen size. */
+  max-width: clamp(120px, 18vw, 280px); overflow: hidden; text-overflow: ellipsis;
 }
 .multi-select-trigger:hover { border-color: var(--accent); color: var(--accent); }
 .multi-select-menu {
@@ -2412,7 +2464,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 .audio-unlock-overlay {
  position: fixed;
  inset: 0;
-  z-index: 10000;
+  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -2640,7 +2692,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 /* === Channel Color Picker (#674) === */
 .cc-picker-popover {
  position: fixed;
-  z-index: 9999;
+  z-index: var(--z-tooltip);
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
@@ -2996,13 +3048,13 @@ th.sort-active { color: var(--accent, #60a5fa); }
 .fux-help-btn:hover,
 .fux-saved-trigger:hover { background: var(--bg-hover, var(--surface)); }

-.fux-popover { position: fixed; top: 60px; right: 24px; width: min(720px, 92vw); max-height: 80vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); z-index: 10000; padding: 0; }
+.fux-popover { position: fixed; top: 60px; right: 24px; width: min(720px, 92vw); max-height: 80vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.35); z-index: var(--z-modal); padding: 0; }
 /* #1122: when help is opened inside .modal-overlay (real modal/backdrop),
   reset the absolute positioning so the flex-centered overlay places it.
   Also neutralise .modal default padding so the sticky header sits flush. */
 .modal-overlay > .fux-popover { position: relative; top: auto; right: auto; left: auto; bottom: auto; padding: 0; max-width: min(720px, 92vw); width: min(720px, 92vw); }
 .modal.fux-popover { padding: 0; }
-.fux-help-overlay { z-index: 10000; }
+.fux-help-overlay { z-index: var(--z-modal); }
 /* #1124: keep the help modal inside the viewport. The backdrop alone is
 * enough visual separation; rows underneath stay rendered. */
 .modal-overlay > .fux-popover { max-height: 80vh; overflow-y: auto; }
@@ -3024,11 +3076,11 @@ th.sort-active { color: var(--accent, #60a5fa); }
 }
 .path-overflow-pill:hover { color: var(--text); background: var(--bg-hover, var(--surface)); }
 .path-popover {
-  position: absolute; z-index: 10500;
+  position: absolute; z-index: var(--z-popover);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
-  padding: 8px 10px; max-width: 480px; max-height: 60vh; overflow: auto;
+  padding: 8px 10px; max-width: min(360px, calc(100vw - 32px)); max-height: 240px; overflow: auto;
  font-family: var(--mono); font-size: 12px;
 }
 .path-popover .path-popover-title { font-family: var(--font); font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
@@ -3047,18 +3099,18 @@ th.sort-active { color: var(--accent, #60a5fa); }
 .fux-examples { margin: 4px 0; padding-left: 20px; }
 .fux-examples li { margin: 2px 0; }

-.fux-ac-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; max-height: 280px; overflow-y: auto; z-index: 9999; box-shadow: 0 4px 12px rgba(0,0,0,0.25); margin-top: 2px; }
+.fux-ac-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; max-height: 280px; overflow-y: auto; z-index: var(--z-tooltip); box-shadow: 0 4px 12px rgba(0,0,0,0.25); margin-top: 2px; }
 .fux-ac-item { padding: 4px 10px; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 12px; }
 .fux-ac-item:hover,
 .fux-ac-item.active { background: var(--bg-hover, rgba(120,160,255,0.12)); }
 .fux-ac-val { font-family: var(--mono); color: var(--text); }
 .fux-ac-desc { color: var(--text-muted); font-size: 11px; max-width: 60%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

-.fux-ctx-menu { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); z-index: 10001; min-width: 200px; padding: 4px 0; }
+.fux-ctx-menu { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,0.35); z-index: var(--z-tooltip); min-width: 200px; padding: 4px 0; }
 .fux-ctx-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 5px 12px; font-size: 12px; cursor: pointer; font-family: var(--mono); }
 .fux-ctx-item:hover { background: var(--bg-hover, rgba(120,160,255,0.12)); }

-.fux-saved-menu { position: absolute; top: 100%; left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; z-index: 9999; box-shadow: 0 4px 14px rgba(0,0,0,0.3); margin-top: 4px; padding: 4px 0; }
+.fux-saved-menu { position: absolute; top: 100%; left: 0; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; z-index: var(--z-tooltip); box-shadow: 0 4px 14px rgba(0,0,0,0.3); margin-top: 4px; padding: 4px 0; }
 .fux-saved-menu.hidden { display: none; }
 .fux-saved-header { padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
 .fux-saved-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
@@ -0,0 +1,188 @@
+/**
+ * E2E (#1128): Packets page layout chaos.
+ *
+ * Asserts the user-visible properties broken by the 5 sub-bugs documented in
+ * specs/packets-layout-audit.md:
+ *
+ *  1. Bug 4 (--surface undefined): Saved-filter dropdown background must be
+ *     OPAQUE — we read its computed `background-color`, parse the alpha and
+ *     fail if the alpha channel is below 0.99. Same check applies to the
+ *     `+N` path-overflow popover (`.path-popover`).
+ *  2. Bug 1 (path chip spill / no `+N`): every `.path-hops` host whose
+ *     scrollWidth > clientWidth must have a `.path-overflow-pill` rendered
+ *     after the hop-resolver mutation pass settles.
+ *  3. Bug 2 (`+N` popover position + z-index): when opened, the popover's
+ *     z-index must be ≤ 9000 (under modal stack) and its top edge must be
+ *     within 8px of the pill's top OR bottom edge — i.e. anchored to the
+ *     pill, not floating arbitrarily across the table.
+ *  4. Bug 3 (filter-bar gap + multi-select trigger truncation): the
+ *     `.filter-bar` row-gap must be ≥ 10px (controls are 34px tall, 6px gap
+ *     allows visual overlap on wrap), and every `.multi-select-trigger` must
+ *     have a CSS `max-width` ≤ 280px (clamp viewport-aware cap) so a long
+ *     "TRACE,MULTIPART,..." label doesn't balloon the row.
+ *
+ * Usage: BASE_URL=http://localhost:13581 node test-issue-1128-packets-layout-e2e.js
+ */
+'use strict';
+const { chromium } = require('playwright');
+
+const BASE = process.env.BASE_URL || 'http://localhost:13581';
+
+let passed = 0, failed = 0;
+async function step(name, fn) {
+  try { await fn(); passed++; console.log('  ✓ ' + name); }
+  catch (e) { failed++; console.error('  ✗ ' + name + ': ' + e.message); }
+}
+function assert(c, m) { if (!c) throw new Error(m || 'assertion failed'); }
+
+// Parse "rgba(r,g,b,a)" / "rgb(r,g,b)" → alpha (1 if rgb).
+function parseAlpha(s) {
+  if (!s) return 0;
+  if (s === 'transparent') return 0;
+  var m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)$/i.exec(s);
+  if (!m) return 1; // assume opaque named color
+  return m[4] === undefined ? 1 : parseFloat(m[4]);
+}
+
+(async () => {
+  const browser = await chromium.launch({
+    headless: true,
+    executablePath: process.env.CHROMIUM_PATH || undefined,
+    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'],
+  });
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  const page = await ctx.newPage();
+  page.setDefaultTimeout(8000);
+  page.on('pageerror', (e) => console.error('[pageerror]', e.message));
+
+  console.log(`\n=== #1128 packets layout E2E against ${BASE} ===`);
+
+  await step('navigate to /packets and wait for table + rows', async () => {
+    await page.goto(BASE + '/#/packets', { waitUntil: 'domcontentloaded' });
+    await page.waitForSelector('#packetFilterInput', { timeout: 8000 });
+    await page.waitForFunction(() => !!document.querySelector('#filterUxBar'), { timeout: 8000 });
+    await page.evaluate(() => {
+      const sel = document.getElementById('fTimeWindow');
+      if (sel) { sel.value = '0'; sel.dispatchEvent(new Event('change', { bubbles: true })); }
+    });
+    await page.waitForFunction(
+      () => Array.from(document.querySelectorAll('#pktBody tr'))
+              .filter(r => r.id !== 'vscroll-top' && r.id !== 'vscroll-bottom').length > 0,
+      { timeout: 8000 });
+    // Allow hop-resolver async pass to settle so chips reflect resolved names.
+    await page.waitForTimeout(400);
+  });
+
+  await step('Bug 4: Saved-filter dropdown background is OPAQUE (alpha ≥ 0.99)', async () => {
+    // Open the saved menu
+    await page.evaluate(() => {
+      var btn = document.getElementById('filterSavedTrigger');
+      if (btn) btn.click();
+    });
+    const result = await page.evaluate(() => {
+      var menu = document.getElementById('filterSavedMenu');
+      if (!menu) return { error: 'no #filterSavedMenu' };
+      // un-hide if needed (some impls toggle .hidden)
+      menu.classList.remove('hidden');
+      var cs = getComputedStyle(menu);
+      return { bg: cs.backgroundColor, display: cs.display };
+    });
+    assert(!result.error, result.error);
+    var alpha = parseAlpha(result.bg);
+    assert(alpha >= 0.99,
+      'Saved menu background not opaque: alpha=' + alpha + ' bg=' + result.bg +
+      ' (likely --surface undefined / Bug 4)');
+    // close
+    await page.keyboard.press('Escape').catch(() => {});
+  });
+
+  await step('Bug 1: every overflowing .path-hops has a .path-overflow-pill', async () => {
+    const result = await page.evaluate(() => {
+      var hosts = Array.from(document.querySelectorAll('#pktBody .path-hops'));
+      var offenders = [];
+      for (var i = 0; i < hosts.length; i++) {
+        var h = hosts[i];
+        // Treat "overflowing" as scrollWidth strictly greater than clientWidth
+        // by more than 1 px to avoid sub-pixel rounding noise.
+        if (h.scrollWidth - h.clientWidth > 1) {
+          if (!h.querySelector('.path-overflow-pill')) {
+            offenders.push({
+              sw: h.scrollWidth, cw: h.clientWidth,
+              chips: h.querySelectorAll('.hop, .hop-named').length,
+            });
+          }
+        }
+      }
+      return { totalHosts: hosts.length, offenders: offenders.slice(0, 5) };
+    });
+    assert(result.totalHosts > 0, 'no .path-hops in fixture rows');
+    assert(result.offenders.length === 0,
+      'overflowing .path-hops without +N pill: ' + JSON.stringify(result.offenders));
+  });
+
+  await step('Bug 2: +N popover anchored to pill + z-index ≤ 9000', async () => {
+    const found = await page.evaluate(() => {
+      var pill = document.querySelector('#pktBody .path-overflow-pill');
+      if (!pill) return { skip: true };
+      pill.scrollIntoView({ block: 'center' });
+      return { skip: false };
+    });
+    if (found.skip) {
+      console.log('    (no +N pill present in fixture — skipping anchor check)');
+      return;
+    }
+    // After scrollIntoView the virtual scroll may rebuild rows; wait then
+    // capture the pill's rect from the *current* DOM, then click it.
+    await page.waitForTimeout(250);
+    const result = await page.evaluate(() => {
+      var pill = document.querySelector('#pktBody .path-overflow-pill');
+      if (!pill) return { error: 'pill vanished after scroll' };
+      var br = pill.getBoundingClientRect();
+      pill.click();
+      var pop = document.querySelector('.path-popover');
+      if (!pop) return { error: 'popover did not appear after pill click' };
+      var pr = pop.getBoundingClientRect();
+      var z = parseInt(getComputedStyle(pop).zIndex, 10) || 0;
+      var anchoredBelow = Math.abs(pr.top - br.bottom) <= 8;
+      var anchoredAbove = Math.abs(pr.bottom - br.top) <= 8;
+      return { z, anchoredBelow, anchoredAbove,
+               pr: { top: pr.top, bottom: pr.bottom },
+               br: { top: br.top, bottom: br.bottom } };
+    });
+    assert(!result.error, result.error);
+    assert(result.z <= 9000, '+N popover z-index too high (over modal stack): ' + result.z);
+    assert(result.anchoredBelow || result.anchoredAbove,
+      '+N popover not anchored to pill: pop=' + JSON.stringify(result.pr) +
+      ' pill=' + JSON.stringify(result.br));
+  });
+
+  await step('Bug 3: .filter-bar row-gap ≥ 10px AND .multi-select-trigger has bounded max-width', async () => {
+    const result = await page.evaluate(() => {
+      var bar = document.querySelector('.filter-bar');
+      if (!bar) return { error: 'no .filter-bar' };
+      var cs = getComputedStyle(bar);
+      var rg = parseFloat(cs.rowGap || cs.gap || '0');
+      var triggers = Array.from(document.querySelectorAll('.multi-select-trigger'));
+      var unboundedTrigger = null;
+      for (var i = 0; i < triggers.length; i++) {
+        var mw = getComputedStyle(triggers[i]).maxWidth;
+        // "none" or empty == unbounded; numeric px > 280 == too loose
+        if (mw === 'none' || mw === '' ) { unboundedTrigger = { idx: i, mw }; break; }
+        var px = parseFloat(mw);
+        if (!isFinite(px) || px > 280) { unboundedTrigger = { idx: i, mw }; break; }
+      }
+      return { rowGap: rg, triggerCount: triggers.length, unboundedTrigger };
+    });
+    assert(!result.error, result.error);
+    assert(result.rowGap >= 10,
+      '.filter-bar row-gap too small (causes wrap overlap with 34px controls): ' + result.rowGap);
+    assert(result.triggerCount > 0, 'no .multi-select-trigger present (filter UX missing?)');
+    assert(!result.unboundedTrigger,
+      '.multi-select-trigger lacks bounded max-width: ' + JSON.stringify(result.unboundedTrigger));
+  });
+
+  await browser.close();
+
+  console.log(`\n=== Results: passed ${passed} failed ${failed} ===`);
+  process.exit(failed > 0 ? 1 : 0);
+})().catch(e => { console.error(e); process.exit(1); });