fix(frontend): sticky ribbon seam and header density (#482, #483) #1019

Merged

PlasticDigits merged 1 commit from fix/482-483-sticky-header-density into main

2026-07-13 01:55:41 +00:00

PlasticDigits commented

2026-07-13 01:20:31 +00:00

(Migrated from gitlab.com)

Summary

#482: Opaque .app-top-sticky stack background, stronger ribbon panel+tint backgrounds, larger header↔ribbon seam/padding, and more main clearance so Trade/page copy cannot bleed through or mash into the environment strip.
#483: Raise HEADER_FULL_NAV_MIN_WIDTH_PX to 1200, omit desktop/tablet NetworkBadge (ribbon is the primary network signal), and assert ≥ ~8px gap between More and the theme group at 1200/1280/1440.
Docs + agent skills updated with sticky-opacity and nav→controls invariants (docs/frontend.md, AGENTS_FRONTEND_RESPONSIVE_HEADER.md, AGENTS_FRONTEND_RISK_DISCLAIMERS.md, AGENTS_FRONTEND_THEME_TOGGLE.md).

Closes #482
Closes #483

Test plan

PLAYWRIGHT_SKIP_CHAIN=1 npx playwright test e2e/navigation.spec.ts -g "Sticky shell seam|Header nav → controls gap" --project=e2e-smoke
Full e2e/navigation.spec.ts smoke (tablet compact, #136/#170/#186 regressions)
Manual: mainnet-length ribbon fixture (or VITE_NETWORK=mainnet preview) at 1280 dark/light — seam + no scroll bleed on /trade
Manual: 1200 / 1280 wallet connected — More vs Dark/Light distinct hit targets; compact band ≤1199 still Swap+More
Dark + light, 100% and 110% zoom on /trade and Swap

## Summary - **#482**: Opaque `.app-top-sticky` stack background, stronger ribbon panel+tint backgrounds, larger header↔ribbon seam/padding, and more main clearance so Trade/page copy cannot bleed through or mash into the environment strip. - **#483**: Raise `HEADER_FULL_NAV_MIN_WIDTH_PX` to **1200**, omit desktop/tablet `NetworkBadge` (ribbon is the primary network signal), and assert ≥ ~8px gap between More and the theme group at 1200/1280/1440. - Docs + agent skills updated with sticky-opacity and nav→controls invariants (`docs/frontend.md`, `AGENTS_FRONTEND_RESPONSIVE_HEADER.md`, `AGENTS_FRONTEND_RISK_DISCLAIMERS.md`, `AGENTS_FRONTEND_THEME_TOGGLE.md`). Closes #482 Closes #483 ## Test plan - [ ] `PLAYWRIGHT_SKIP_CHAIN=1 npx playwright test e2e/navigation.spec.ts -g "Sticky shell seam|Header nav → controls gap" --project=e2e-smoke` - [ ] Full `e2e/navigation.spec.ts` smoke (tablet compact, #136/#170/#186 regressions) - [ ] Manual: mainnet-length ribbon fixture (or `VITE_NETWORK=mainnet` preview) at 1280 dark/light — seam + no scroll bleed on `/trade` - [ ] Manual: 1200 / 1280 wallet connected — More vs Dark/Light distinct hit targets; compact band ≤1199 still Swap+More - [ ] Dark + light, 100% and 110% zoom on `/trade` and Swap

Rows
Columns