fix(frontend): paint More/wallet menus above EnvironmentRibbon (#486) #1022

Merged

PlasticDigits merged 1 commit from fix/486-menu-ribbon-stacking into main

2026-07-13 12:29:42 +00:00

PlasticDigits commented

2026-07-13 12:07:55 +00:00

(Migrated from gitlab.com)

Summary

Fix desktop/tablet stacking so open More (.app-menu) and wallet (.wallet-menu) paint above EnvironmentRibbon inside .app-top-sticky (#486).
Root cause: header card and ribbon both use backdrop-filter (separate stacking contexts); with sticky isolation: isolate, the later ribbon sibling occluded menus. Explicit .app-header-shell (z-index: 2) above .app-env-ribbon (z-index: 1) preserves #482 opacity/isolate and content-column ribbon width.
Playwright: new intersection elementFromPoint assertions (fail without fix, pass with fix). Docs/skills updated and cross-linked.

Closes #486

Test plan

Desktop ≥1200px: open More — Protocol / Fee Tiers / Create Pair fully visible above ribbon; click Protocol
Tablet 768–1199px: open More (overflow primaries) — no ribbon cut; menuitems clickable
Connected wallet dropdown clears ribbon band (copy/explorer/switch visible)
Ribbon still visible when menus closed; scroll bleed check on /trade (#482 still green)
More↔theme gap ≥ ~8px at 1200/1280/1440 (#483)
Escape / dismiss overlay / route change still close menus
Mobile More sheet unchanged
Automated: PLAYWRIGHT_SKIP_CHAIN=1 npx playwright test e2e/navigation.spec.ts -g "GitLab #486|#482|#483" --project=e2e-smoke

## Summary - Fix desktop/tablet stacking so open **More** (`.app-menu`) and **wallet** (`.wallet-menu`) paint above `EnvironmentRibbon` inside `.app-top-sticky` ([#486](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/486)). - Root cause: header card and ribbon both use `backdrop-filter` (separate stacking contexts); with sticky `isolation: isolate`, the later ribbon sibling occluded menus. Explicit `.app-header-shell` (`z-index: 2`) above `.app-env-ribbon` (`z-index: 1`) preserves #482 opacity/isolate and content-column ribbon width. - Playwright: new intersection `elementFromPoint` assertions (fail without fix, pass with fix). Docs/skills updated and cross-linked. Closes #486 ## Test plan - [ ] Desktop ≥1200px: open More — Protocol / Fee Tiers / Create Pair fully visible above ribbon; click Protocol - [ ] Tablet 768–1199px: open More (overflow primaries) — no ribbon cut; menuitems clickable - [ ] Connected wallet dropdown clears ribbon band (copy/explorer/switch visible) - [ ] Ribbon still visible when menus closed; scroll bleed check on `/trade` (#482 still green) - [ ] More↔theme gap ≥ ~8px at 1200/1280/1440 (#483) - [ ] Escape / dismiss overlay / route change still close menus - [ ] Mobile More sheet unchanged - [ ] Automated: `PLAYWRIGHT_SKIP_CHAIN=1 npx playwright test e2e/navigation.spec.ts -g "GitLab #486|#482|#483" --project=e2e-smoke`

Rows
Columns