fix(#389): header-menu sheets escape the header stacking context; single view button enforced in wiring #526

Merged

Cordy merged 5 commits from fix-389g into main

2026-09-13 20:25:35 +00:00

Cordy commented

2026-09-13 20:24:30 +00:00

Owner

Avatar / bell sheets dimmed and untappable: header.top is position:sticky; z-index:20 — a stacking context. The user and bell menus live inside it, so their bottom sheets could never rise above the root-level scrim (z-80) or tab bar (z-60): the sheet rendered greyed underneath, and every tap landed on the scrim, whose document-level click handler closed the menu ("tapping Appearance just closes it"). Fix: .top:has(.menu.open){z-index:95} inside the ≤480 fence — while one of its menus is open the header rises above the scrim, so the sheet is bright and tappable, and click-away on the dimmed page still closes it. Desktop popovers never met the scrim; unchanged.

View toggle still two buttons on real devices: the v0.6.185 CSS rule, the markup and the wiring all verify correct, yet both segments render on Nikola's phone and desktop. The collapse now lives in wireViewTog.set() itself: the current view's button gets an inline display:none, which nothing in the cascade can beat, on every switch and at boot. The CSS rule stays as a progressive default.

**Avatar / bell sheets dimmed and untappable:** `header.top` is `position:sticky; z-index:20` — a stacking context. The user and bell menus live inside it, so their bottom sheets could never rise above the root-level scrim (z-80) or tab bar (z-60): the sheet rendered greyed underneath, and every tap landed on the scrim, whose document-level click handler closed the menu ("tapping Appearance just closes it"). Fix: `.top:has(.menu.open){z-index:95}` inside the ≤480 fence — while one of its menus is open the header rises above the scrim, so the sheet is bright and tappable, and click-away on the dimmed page still closes it. Desktop popovers never met the scrim; unchanged. **View toggle still two buttons on real devices:** the v0.6.185 CSS rule, the markup and the wiring all verify correct, yet both segments render on Nikola's phone and desktop. The collapse now lives in `wireViewTog.set()` itself: the current view's button gets an inline `display:none`, which nothing in the cascade can beat, on every switch and at boot. The CSS rule stays as a progressive default.

Cordy added 5 commits

2026-09-13 20:24:31 +00:00

scout: viewtog rule as shipped + any competing rules + menu DOM parents 7f63cdd9dc

diag: how the stable toolbar slot delivers sort/view/gear per view 0e79784bbb

one-shot: #389 - header-menu sheets escape the header stacking context + JS-enforced single view button 88140018ba

one-shot: clean splice-1 anchor expression 8d7b0f4d74

fix(#389 ): header-menu sheets escape the header stacking context; view toggle enforced in wiring

ci / test-and-build (pull_request) Successful in 52s

Details

52071b5586

The avatar and notification menus live inside header.top, which is
position:sticky with z-index:20 - a stacking context. Their bottom
sheets could therefore never rise above the root-level scrim (z-80)
or the tab bar (z-60): the sheet rendered dimmed underneath and every
tap landed on the scrim, whose document-level click handler closed
the menu ('tapping Appearance just closes it'). While a menu inside
the header is open, the header now rises to z-95, putting the sheet
above the scrim and making it tappable. Fenced at phone width; the
desktop popovers never met the scrim and are unchanged.

The single view-toggle button shipped in v0.6.185 as a pure CSS rule
reportedly still shows both segments on real devices even though the
rule, the markup and the wiring all check out - so the collapse now
lives in wireViewTog itself: set() writes an inline display:none on
the current view's button, which nothing in the cascade can beat.
The CSS rule stays as a progressive default.

Cordy scheduled this pull request to auto merge when all checks succeed

2026-09-13 20:24:38 +00:00