mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-06-04 07:21:19 +00:00
Kpa-clawbot
b2d654bf61
## Closes #1415 — packets cross-viewport jank ## Closes #1458 — Tufte mobile-packets P0 findings (folded into same branch) Single PR covers both issues — they touch the same files (`public/packets.js`, `public/style.css`) and a split would invite merge thrash. ### #1415 — column priority + chrome compaction Locked column-priority tiers (operator spec): | Tier | Viewport | Columns | |---|---|---| | 1 | always (mobile through desktop) | expand · time · type · details | | 2 | tablet+ (>768px) | path | | 3 | desktop only (>1024px) | hash · observer · rpt | Enforced via existing `data-priority` system in `TableResponsive.apply` (priorities 3 → hide ≤1024, 5 → hide ≤768). CSS: - `.col-expand` pinned to `width/min-width/max-width: 32px` at every viewport — kills the 50–180px dead column that pushed every data column right. - `.col-details` capped at `max-width: 480px` so wide viewports stop wasting hundreds of px on the last column. - `@media (max-width: 480px)` hides page-header BYOP, shrinks the h2, and tightens row padding → pre-table chrome drops from ~280px to ~140px. ### #1458 — Tufte mobile P0 findings **P0-A: semantic-first detail panel.** Was: `"Packet Byte Breakdown (134 bytes)"` title + giant neon hex grid above the meaningful fields. Now: type badge + decoded summary + hop count + `src → dst` lead the panel, followed by the existing `.detail-meta` dl (reordered: Payload Type → Path → Timestamp → Observer). **P0-B: raw-bytes disclosure.** Hex legend / hex dump / field table wrapped in `<details class="detail-technical">`. Disclosure copy reads "Show raw bytes". Collapsed by default on phones (`window.innerWidth ≤ 480`), expanded on tablet+. **P0-C: mobile filter-zone collapse.** The always-on filter-expression input above `.filter-bar` is now wrapped with `.pkt-filter-expr` and hidden under the `@media (max-width: 480px)` block. Reveals when the existing "Filters ▾" toggle adds `.filters-expanded` to the sibling `.filter-bar` (CSS `:has()` selector — one tap reveals both chrome rows together). ### TDD `test-issue-1415-packets-layout.js` — pure source-grep, no browser: - col-expand class on first `<th>` + `<td>` + CSS 32px pin - locked column-priority tier values per column - `.col-details` max-width ≤ 480px - mobile @media block: hides BYOP, hides `.pkt-filter-expr` (revealed by `.filters-expanded`) - detail-meta order: Payload Type before Observer - `<details class="detail-technical">` wrapper exists with "Show raw bytes" summary - detail-title leads with a type badge; `.detail-srcdst` emitted - old "Packet Byte Breakdown (N bytes)" title literal removed Red commit `d4372d82` (8 assertion failures, no compile errors), green commit `4fab9dbd` (#1415 work), follow-up commit `a5218035` (#1458 work) keeps everything green. 26 assertions, 0 failed. --------- Co-authored-by: openclaw-bot <bot@openclaw>
