[adminopenclaw8-sketch]

Relates to #258

Follow-up to #252 (#244). It addresses finding 1 and the "UX remainder" of the #252 review. Plan: comment on #258.

Problem

makeColumnsResizable() (public/app.js) sizes a table's columns from the header and the first body rows. Two things went wrong:

1. Colspan rows counted. It measured cells by index, so a full-width colspan row (the packets vscroll spacers, "No packets found") was credited to column 0.
2. One-shot measurement. It measured only once, from whatever the first render had.

On packets with an aged fixture, the default 15-min window is empty. At 1200 px the expand column got 43 % of the table and Details 65 px. Long advert names then sat entirely on the line the #67 clamp hides, and only the icon showed. Even with a fresh fixture, expand took 176 px for a chevron.

Fix

• Skip colspan rows. columnMeasureRows() keeps only rows with one cell per header cell and no colspan.
• Re-measure once, later. With fewer than 5 usable rows the widths are provisional.
  • One MutationObserver (childList on the tbody) measures again once real rows arrive, then disconnects.
  • It does not re-measure if the user has saved widths by then.
  • A table measured from a full body gets no observer.
• The re-measure sees the table as the first measure did:
  • Hidden columns: TableResponsive.unhidden(table, fn) (packets.js) runs the measurement with its own column hiding lifted. Its tbody observer runs after ours, so the new rows' cells are not yet marked; without this, at 900 px HB came out at 12.2 % instead of 3.8 %.
  • Handles: the resize handles are hidden while measuring. They stick out 4 px past their th.
  • Page-set widths: widths that the page's markup sets on a th are restored, for example observers' style="width:32px".
• Saved widths (meshcore-*-col-widths) are applied exactly as before, and the handles are unchanged.
• Fit logic unchanged. The measure and fit steps are extracted as they were (measureColumnWidths, fitColumnWidths, applyMeasuredColumnWidths, readSavedColumnWidths). The first measure is the same as master's except that colspan rows are skipped.

Perf

• First call: as before, at most 30 rows × columns, once per table.
• Provisional tables only: each tbody childList mutation runs a guard:
  • isConnected;
  • a localStorage read for the storage key;
  • tbody.rows.length;
  • when that length is ≥ 5, a scan for 5 usable rows.
• One re-measure, then nothing. After it, the observer is disconnected, so no per-render or per-row work is left.
• unhidden: two querySelectorAll calls and a class toggle on the hidden cells, only during a measurement.
• Callers: tables measured from a full body (nodes, observers, analytics, new-nodes on the fixture) never create an observer. No new API calls.

Tests

Test-first: each fix commit follows a red test commit.

• test-issue-258-column-widths.js (new, in test-all.sh) runs the real app.js in a vm sandbox with a fake table DOM. Its cells report content width, assigned width and handle overhang. It covers:

  • colspan, short and same-length colspan rows;
  • an empty first body and a near-empty one (2 rows; 4 rows are not enough, 6 rows are);
  • one re-measure, then a disconnected observer;
  • no feedback from the provisional widths;
  • a th width set by the page;
  • hidden columns measured inside unhidden;
  • saved widths before and during the provisional phase;
  • idempotent re-calls;
  • a detached table.

  15 cases, 3/15 on master.

• test-packets.js: the real TableResponsive.unhidden lifts and restores, also when its callback throws. Both new cases are red on master.

• test-issue-258-column-widths-e2e.js (new, in deploy.yml after the bug(packets): filter UX disaster — help panel overlaps table, toolbar chaotic, path chips spill rows Kpa-clawbot/CoreScope#1122 Details clamp E2E). It ages the fixture by moving the browser clock to an effective 20 and 120 min, with the offset taken from the newest packet. At 1200 and 900 px it checks:

  • the default window renders empty;
  • after widening, Details is ≥ 15 % and expand ≤ 10 % of the table;
  • every column's share matches a page opened with that window right away;
  • every on-screen advert link shows ≥ 12 px, and the long pinned name shows at least half;
  • an adverts-only filter, the empty window and the wide window again do not move the widths.

  It also checks that saved widths apply unchanged and that a handle drag resizes and saves. 10/22 on master (12 red).

• test-issue-1122-details-row-clamp-e2e.js:

  • 375 px: the pinned long name must still be cut by its clip there.
  • 900 / 1200 px: it must show at least half of itself, since Details now fits it.

Gates

• scripts/check-xss-sinks.sh --diff origin/master is clean.
• No hardcoded colours.
• Fork guards are unchanged: 9 in deploy.yml and 1 in release-fast-path.yml.
• One new E2E line in deploy.yml.

🤖 Generated with Claude Code