fix(web): keep the map bar on one row between 641 and 767 px

[khagele]

Between 641 and 767 px the map now uses the phone layout, so the bar is one row of 48 px there. On master it was 90 px for a guest and 76 px for a member in that band.

Cause

The narrow bar (#561) stopped at 640 px. The wide bar only fits from 680 px with the macOS system font, and from 730 px with the wider font on the CI runner.

Change

• The line is 767 px, the usual "below tablet" breakpoint. It lives in one constant, NARROW_MEDIA in web/barnarrow.js, which map.js reads for its matchMedia. The four @media rules in web/style.css repeat the number.
• The bar, the ticker and the notices share that line. A window between 641 and 767 px therefore also gets the pinned ticker (web: on a phone the receptions ticker cannot be moved, and sits wherever a wide screen left it #643) and the filter panel holding the time range and the hunter picker.

Measured

Height of #bar in px, with Verdana standing in for the CI font:

Width	Guest, master	Guest, this PR	Member, master	Member, this PR
660	90	48	76	48
720	76	48	62	48
767	64	48	62	48
768	64	64	62	62

Tests

• e2e/barlayout.spec.js: the one-row test also measures 660 and 720 px, as a guest and as a member. Without the fix it fails at 660 px as a guest, with 90 px where 64 is the limit.
• e2e/ticker-place.spec.js: the clamp case moved from 720 to 800 px. At 720 px the ticker is pinned now, which has its own case.
• vitest 762 of 762, eslint clean.
• Full e2e locally: 293 of 301 under a load average of 80. The 8 that failed are in maprail.spec.js and ui.spec.js, run at 1280 px, and pass when those files run alone (83 of 83).

Not in this PR

At 768 px the guest bar is still 64 px with the CI font, exactly the test's limit. That is unchanged from master.

Closes #727

🤖 Generated with Claude Code

[efiten]

Review before merge: one point to check, places that still say 640, one suggestion. Point 1 is worked out from the CSS, not measured in a browser.

1. In the new 641-767 px band a full-height ticker can run under the button rail (please check)
Between 641 and 767 px wide and taller than 400 px, #rx-log is now pinned at width: calc(100vw - 20px) (web/style.css:1016); only the max-height: 400px rule (:1021) pulls it back from the rail. Before, the wide rule (:327) kept it clear at these widths. At 720x600: ticker bottom about 348, rail top about 274, and the rail's z-index 624 over the ticker's 620, so the rail covers the cross and chevron, the only way to move the card at that width. It needs a remembered full ticker (collapse=0 from a wide screen or a shared link); the first-visit default is one lane.
Proposed: add 720x600 with a saved full ticker to the rail test (barlayout.spec.js:215), and scope the stop-at-rail rule by overlap instead of max-height.

2. Places that still say 640

• docs/design-system.md lines 167, 206, 253, 283, 340, 388, 396 (the §7 reference for surface rules)
• web/style.css:467-468, web/barfilters.js:5, app/src/styles/app.css:370
• web/e2e/popover.spec.js:48 const narrow = width <= 640 (harmless at 412 and 1280, wrong for any width added in the band)

3. Suggestion
A vitest that reads every max-width media number from style.css and compares it with NARROW_MEDIA keeps CSS and JS on one line.

[khagele]

Pushed 29623c7 for the review, rebased on master. Per point:

1. Full ticker under the rail. Measured: at 720x600 with ?rx=0,0,0 the ticker ended at 350 and the rail began at 274, as worked out. The stop-at-rail rule is now scoped by height, (max-width: 767px) and (max-height: 720px): below about 676px of height a full ticker reaches the rail's top at any width under 768, and 720 leaves room for a taller bar. That also covers 640x600 and 375x667 (an iPhone SE held upright), which failed the same way before this PR. A tall phone held upright keeps the ticker across the screen. e2e with a saved full ticker at 720x600, 640x600 and 375x667 (ticker clear of the rail, cross and chevron hit), and at 412x915 (full width); the first three red with the old rule.
2. Places that still said 640. docs/design-system.md (8 places), web/style.css, barfilters.js (both copies), app.css and popover.spec.js, which now reads its width from NARROW_MEDIA.
3. Suggestion taken. barnarrow.test.js reads every width in the stylesheet's media queries and compares it with NARROW_MEDIA. Red with one query back at 640.

Web: 764 tests, eslint, Playwright 305 passed. App: 1628 tests, eslint, build.