mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-05-12 16:54:43 +00:00
Kpa-clawbot
c84ec409c7
## Summary Fixes #1102 — regression from PR #1097 polish where Priority+ collapsed too aggressively at wide widths and the "More" menu didn't reflect what was actually hidden. ## Root cause Two bugs, one root: the post-#1097 CSS rule ```css .nav-links a:not([data-priority="high"]) { display: none; } ``` unconditionally hid 6 of 11 links at every width ≥768px — including 2560px where everything fits comfortably. The "More" menu populator (`querySelectorAll('.nav-links a:not([data-priority="high"])')`) ran exactly once on load against that same selector, so it always held the same 6 links and never reflected the actual viewport fit. ## Fix Replace the static CSS hide with a JS measurement pass (`applyNavPriority` in `public/app.js`): 1. Start with **all** links visible inline. 2. Compute `needed = brand + gutters + visible-links + More + nav-right + safety` and compare to `window.innerWidth`. 3. If it doesn't fit, mark the rightmost (lowest-priority) link `.is-overflow` and re-measure. Repeat. High-priority links are queued last so they're kept visible as long as possible. 4. Rebuild the "More ▾" menu from whatever currently has `.is-overflow`. When nothing overflows, hide the More wrap entirely (`.is-hidden`). 5. Re-run on resize (rAF-debounced), on `hashchange` (active-link padding shifts), and after fonts load. Why JS, not CSS: the breakpoint where each link drops depends on label width, gutters, active-link padding, and the nav-stats badge — none of which are addressable from a media query. ## TDD trail - Red commit `8507756`: `test-nav-priority-1102-e2e.js` — fails 2/4 (2560 and 1920 only show 5/11). - Green commit `3e84736`: implementation — passes 4/4. ## E2E `test-nav-priority-1102-e2e.js` asserts: - 2560px → all 11 visible, More hidden - 1920px → ≥9 visible - 1080px → 5+ visible AND More menu contains every hidden link - 800px → 5+ visible AND More menu non-empty Local run on the e2e fixture: **4/4 pass**. Existing `test-nav-fluid-1055-e2e.js` also stays green: **20/20 pass** (no overlap, no overflow at 768/1024/1280/1440/1920 across 4 routes). --------- Co-authored-by: meshcore-bot <bot@meshcore.local>
