mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-05-12 20:24:47 +00:00
Kpa-clawbot
6d17cac40e
## Summary Makes the analytics chart grid fluid and auto-stacking based on its **own** width rather than the viewport's. Implements task 5 of #1050. ## What changed - `public/style.css` — `.analytics-charts` section only: - Replaced `grid-template-columns: 1fr 1fr` with `repeat(auto-fit, minmax(min(100%, 380px), 1fr))` so columns wrap when intrinsic space is too narrow. - Added `container-type: inline-size` so the grid is a query container and descendants/future tweaks can size against its own width rather than the viewport. The `auto-fit minmax` already handles the stack-on-narrow case, so the previously-included `@container (max-width: 800px)` rule was redundant and has been dropped to keep one source of truth. - `min-width: 0` on cards and `max-width: 100%; height: auto` on `<svg>`/`<canvas>` (descendant selector, robust to wrapper elements between the card and the chart media) to prevent intrinsic-content overflow. - Switched hardcoded `12px` / `16px` spacing to the #1054 tokens `--space-sm` / `--space-md`. - Removed the redundant `@media (max-width: 768px) { .analytics-charts { grid-template-columns: 1fr; } }` rule (the fluid grid supersedes it). No `analytics.js` / `node-analytics.js` markup changes were required — the existing classes are reused. ## TDD - **Red commit (47f56e9)** — `test-analytics-fluid-charts.js`: failing E2E that loads `public/style.css` against a sized harness and asserts no overflow + correct stacking. On master: assertion failures on container-type opt-in + wide-viewport / narrow-container stacking. - **Green commit (d300dfa)** — CSS fix; all assertions pass. ## E2E (mandatory frontend coverage) `node test-analytics-fluid-charts.js` — Playwright + Chromium against a `file://` harness, 8/8 assertions: - `.analytics-charts` opts in to container queries (`container-type: inline-size`) - viewport 1440 / wrapper 1300px → side-by-side (≥2 cols), no overflow - viewport 1080 / wrapper 1040px → no horizontal overflow - viewport 768 / wrapper 760px → cards stack to 1 column, no overflow - viewport 1440 / wrapper 600px → cards stack via fluid grid (the original bug) - viewport 1920 / wrapper 1880px → side-by-side (≥2 cols), no overflow (AC4) - viewport 2560 / wrapper 2520px → side-by-side (≥2 cols), no overflow (AC4) - AC3: open at 1440px wide (side-by-side), shrink wrapper to 760px / viewport to 768px, assert layout reflows to 1 column (charts redraw on resize, not stuck at initial value) `node test-fluid-scaffolding.js` — still green (15/15), confirms #1054 tokens are unaffected. Partial fix for #1058 --------- Co-authored-by: meshcore-bot <bot@meshcore.local>
