mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-07-02 15:31:44 +00:00
Kpa-clawbot
59d664692d
Red commit: 03546923b4 (CI run: pending —
see Checks)
E2E assertion added: test-issue-1630-reach-mobile-e2e.js:97
## Summary
Adds narrow-viewport CSS to `public/node-reach.css` so the
`/nodes/{pubkey}/reach` page no longer overflows phone-class viewports.
Fixes #1630
## Approach (red → green)
1. **RED** (`03546923`): added `test-issue-1630-reach-mobile-e2e.js`
asserting at 393×800 and 360×740 that:
- `#nqMap` computed height ≤ 320px
- `.nq-table` scrollWidth ≤ clientWidth (no inner h-scroll)
- ≤ 4 visible TH columns (low-signal collapsed)
Desktop guard at 1440×900: map height stays ~420px and all 6 columns
remain visible — proves no desktop regression.
Wired into `.github/workflows/deploy.yml` Playwright job so CI is the
source of truth.
2. **GREEN**: added `@media (max-width: 480px)` block in
`public/node-reach.css` that shrinks `.nq-map` to 280px, hides the
`distance (km)` column, and stacks `we hear` / `they hear us` into a
single compact column.
## Out of scope (intentionally not touched)
- Backend `cmd/server/node_reach.go` (tracked in #1631 / #1629).
- Reach page re-theming.
- Per-column user toggles.
## Local verification
Screenshots at the three target viewports (393×800, 360×740, 1440×900)
attached below.
---------
Co-authored-by: openclaw-bot <bot@openclaw.local>
75 lines
4.5 KiB
CSS
75 lines
4.5 KiB
CSS
/* Node reach page — reuses .analytics-stats/.analytics-stat-card/.analytics-time-range
|
||
from the analytics page; these are the reach-specific bits.
|
||
--text-muted / --border / --section-bg are defined globally; no inline hex
|
||
fallbacks here (single source of truth). */
|
||
:root { --nq-print-width: 680px; }
|
||
|
||
.nq-head { max-width:1000px; margin:0 auto; padding:12px 16px; }
|
||
.nq-back { color:var(--accent); text-decoration:none; font-size:12px; }
|
||
.nq-title { margin:4px 0 2px; font-size:18px; }
|
||
.nq-sub { color:var(--text-muted); font-size:11px; }
|
||
.nq-body { max-width:1000px; margin:0 auto; padding:0 16px; }
|
||
.nq-msg { max-width:1000px; margin:0 auto; padding:0 16px; color:var(--text-muted); }
|
||
.nq-load { padding:40px; text-align:center; color:var(--text-muted); }
|
||
.nq-error { padding:40px; text-align:center; color:var(--status-red); }
|
||
|
||
.nq-group-h { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; margin:14px 0 6px; }
|
||
.nq-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:10px 0; font-size:12px; }
|
||
.nq-filter { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
|
||
.nq-filter legend { font-size:11px; color:var(--text-muted); padding:0; margin-right:4px; }
|
||
.nq-print-btn { margin-left:auto; }
|
||
.nq-count { color:var(--text-muted); }
|
||
.nq-empty { color:var(--text-muted); font-size:13px; padding:18px 12px; border:1px dashed var(--border); border-radius:6px; margin:6px 0 24px; }
|
||
.nq-note { margin:6px 0 0; padding:6px 10px; font-size:11px; line-height:1.4; color:var(--text-muted); background:var(--section-bg); border:1px solid var(--border); border-radius:6px; }
|
||
.nq-nogps { margin:0 0 8px; font-size:11px; color:var(--text-muted); }
|
||
.nq-map { height:420px; border:1px solid var(--border); border-radius:6px; margin-bottom:12px; }
|
||
|
||
/* In-map legend (decodes the colour tiers + thresholds). No hex fallback and no
|
||
decorative shadow — the 1px border already separates it from the tiles. */
|
||
.nq-legend { background:var(--surface-0); color:var(--text-muted); border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:11px; line-height:1.5; }
|
||
.nq-legend .nq-sw { display:inline-block; width:18px; height:3px; vertical-align:middle; margin-right:6px; border-radius:2px; }
|
||
|
||
/* Table: horizontal rules only — erase the non-data grid ink (Tufte). */
|
||
.nq-table { border-collapse:collapse; width:100%; font-size:12px; margin-bottom:24px; }
|
||
.nq-table th, .nq-table td { border:0; border-bottom:1px solid var(--border); padding:4px 8px; }
|
||
.nq-table thead th { border-bottom:2px solid var(--border); background:none; font-size:12px; font-weight:600; text-transform:none; text-align:left; }
|
||
.nq-n { text-align:right; font-variant-numeric:tabular-nums; }
|
||
.nq-num { text-align:right; color:var(--text-muted); width:26px; }
|
||
.nq-link { color:var(--accent); text-decoration:none; font-weight:600; }
|
||
.nq-link:hover { text-decoration:underline; }
|
||
.nq-oneway { color:var(--text-muted); }
|
||
.nq-dir { font-size:10px; color:var(--text-muted); }
|
||
/* Bottleneck tier: colour + glyph so the encoding survives colour-blindness. */
|
||
.nq-tier { font-weight:700; }
|
||
.nq-tier-glyph { font-size:10px; margin-left:4px; letter-spacing:1px; }
|
||
|
||
@media print {
|
||
/* Scope the print to the report only — the SPA shell (nav/header/sidebar)
|
||
must not bleed onto the page. */
|
||
body * { visibility:hidden; }
|
||
#nq-report, #nq-report * { visibility:visible; }
|
||
#nq-report { position:absolute; left:0; top:0; width:100%; }
|
||
.nq-noprint { display:none !important; }
|
||
.nq-map { width:var(--nq-print-width) !important; height:300px; }
|
||
.nq-table { font-size:10px; }
|
||
}
|
||
|
||
/* #1630 — narrow-viewport (phone) layout.
|
||
At ≤480px the 420px map dominates and the 6-col link table h-scrolls.
|
||
Shrink the map to 280px so stats land above the fold, and collapse the
|
||
two lowest-signal columns (`they hear us` and `distance (km)`) — the
|
||
`we hear` value plus the colour-coded `bottleneck` tier preserve the
|
||
asymmetry signal. Desktop layout (≥481px) is untouched. */
|
||
@media (max-width: 480px) {
|
||
.nq-map { height:280px; }
|
||
/* col 4 = `they hear us`, col 6 = `distance (km)` (see node-reach.js
|
||
thead/tbody emit order). Hide on phones to fit a 360–393px viewport
|
||
without horizontal scroll. */
|
||
.nq-table th:nth-child(4),
|
||
.nq-table td:nth-child(4),
|
||
.nq-table th:nth-child(6),
|
||
.nq-table td:nth-child(6) { display:none; }
|
||
/* Tighter cell padding so the remaining four columns breathe. */
|
||
.nq-table th, .nq-table td { padding:4px 6px; }
|
||
}
|