fix(frontend): Desktop header density — theme control crowds More at full-nav widths #483

New issue

Closed

opened 2026-07-12 12:11:13 +00:00 by PlasticDigits · 11 comments

PlasticDigits commented

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

(Migrated from gitlab.com)

Summary

MacBook Chrome report (same session as sticky ribbon overlap): at full desktop header density, the Dark/Light theme control crowds the “More” nav control (near-zero gap / apparent overlap). Brand active chrome around “CL8Y DEXSwap” can also look squashed when the center nav column is under horizontal pressure.

Bundled with related header-density follow-ups so #136-family layout does not regress again at the nav → controls boundary (existing E2E only checks overlap inside nav).

Current codebase

frontend-dapp/src/components/common/Layout.tsx — .app-header grid: brand | nav.app-desktop-nav | .app-header-controls (theme + NetworkBadge + WalletButton).
frontend-dapp/src/components/common/navItems.ts — HEADER_FULL_NAV_MIN_WIDTH_PX = 1120 (full inline nav vs compact “Swap + More”).
frontend-dapp/src/index.css:
- .app-header — grid-template-columns: auto 1fr auto; gap: 20px
- Nav links use flex-shrink: 0 (cannot compress)
- .app-header-controls — gap: 10px
- .app-header-theme-group — flex-shrink: 0; gap: 8px
ThemeSegmentedControl.tsx, NetworkBadge.tsx, WalletButton.tsx / WalletChipNetworkIndicator.tsx — right-side density (duplicate network affordances with the environment ribbon).
frontend-dapp/e2e/navigation.spec.ts — asserts nav items do not overlap each other and checks wallet vs More in some cases; does not assert last nav control vs first theme button gap at 1120 / 1280 / 1440 with wallet connected on mainnet-width chrome.

Closed predecessors: #136 (tablet cram → fold), #170 (theme moved into header), #52 (hide brand copy below 1024px), #186 (wallet chip network label vs width).

Why a new implementation is needed

Raising the full-nav breakpoint and moving theme into the header fixed mid-tablet cram, but at the lower bound of full desktop nav (~1120–1280) the non-shrinkable nav + theme + network badge + wallet still compete for width. Reporter’s MacBook Chrome shows More and Dark nearly fused. That is a real usability/hit-target bug and a gap in current overlap tests. Fixing only the vertical ribbon issue will not restore horizontal spacing.

Constraints / guardrails

Preserve compact nav fold behavior below HEADER_FULL_NAV_MIN_WIDTH_PX (#136).
Keep theme toggle in the sticky header on desktop (#170); do not move it back to footer-only.
Prefer one clear network signal: header NetworkBadge may be simplified when EnvironmentRibbon is visible, but do not remove the ribbon (#138).
Do not shrink touch/hit targets below existing theme/nav button sizes without a11y review.
Brand mark size (56×56 desktop) and “CL8Y DEX” visibility rules (≥1024px) should remain coherent — no collision with active Swap pill.
Changes should be CSS/breakpoint/density only unless a small structural reorder is required; no unrelated nav IA changes.

Relevant files

Path	Role
`frontend-dapp/src/components/common/Layout.tsx`	Header grid + controls composition
`frontend-dapp/src/components/common/navItems.ts`	Full-nav min width constant
`frontend-dapp/src/components/common/ThemeSegmentedControl.tsx`	Dark/Light control
`frontend-dapp/src/components/common/AppShellNavLink.tsx`	Nav link chrome
`frontend-dapp/src/components/wallet/NetworkBadge.tsx`	Header network chip
`frontend-dapp/src/components/wallet/WalletButton.tsx`	Wallet trigger width
`frontend-dapp/src/index.css`	`.app-header`, `.app-header-controls`, `.app-header-theme-group`, `.app-brand`
`frontend-dapp/e2e/navigation.spec.ts`	Extend overlap assertions
`skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md`	Header density playbook
`skills/AGENTS_FRONTEND_THEME_TOGGLE.md`	Theme placement

Recommended direction

Add Playwright bounding-box assertions: last item in nav.app-desktop-nav vs .app-header-theme-group (and wallet) at 1120, 1280, 1440 with wallet connected.
If failing: raise HEADER_FULL_NAV_MIN_WIDTH_PX, tighten nav padding slightly, add min-gap / margin-inline-start on controls, and/or hide header NetworkBadge when ribbon is present (ribbon already satisfies #138).
Ensure .app-brand / brand copy do not compress into the active nav pill at full-nav widths.
Document the nav→controls gap rule in AGENTS_FRONTEND_RESPONSIVE_HEADER.md so future nav items do not reintroduce cram.

Acceptance criteria

At 1120px and 1280px (wallet connected, dark theme), ≥ ~8px horizontal gap between last desktop nav control (e.g. More) and the theme group.
Theme Dark/Light buttons do not overlap each other or NetworkBadge/Wallet.
Brand mark remains 56×56 on desktop; “CL8Y DEX” (when shown) does not collide with the active nav pill.
Compact band (768–1119) still folds to Swap + More without horizontal overflow.
Existing #136 nav-internal overlap and #170 theme-in-header tests remain green.

Test plan (all paths)

Path	How
1120 / 1280 / 1440, wallet disconnected	Gap nav → theme
Same widths, wallet connected (+ optional network chip on wallet)	Gap nav → theme → badge → wallet
Mainnet vs local builds	Longer “Mainnet” badge must not collapse gaps
Light + dark	Active theme chrome does not reduce effective gap below threshold
Compact 768–1119	Fold still correct; theme/network still usable
Mobile	Header controls rules unchanged relative to bottom nav
Zoom 110% at 1280 CSS px	Effective width shrink must either keep gap or fold earlier cleanly

Test plan (attack / hack / abuse)

Vector	Expectation
Oversized wallet label / truncated address spoof	Chip truncation must not push theme under More or off-screen without fold.
Theme localStorage garbage values	Fall back to valid theme; layout still gaps correctly.
Rapid resize across 1120 breakpoint	No stuck overlapping state; fold/expand settles with non-overlapping hit targets.
Keyboard / screen reader	Theme and More remain separately focusable; no merged click targets.
Click-through / hit-target steal	Crowded controls must not make More open when intending Dark (or vice versa).

Verification criteria

Reproduced crowding on MacBook Chrome (or CI viewport matrix) before/after.
New E2E gap assertions pass on CI at listed widths with connected wallet fixture.
Manual check: More dropdown and theme toggle are distinct hit targets at 1120 and 1280.
Skills/docs updated if breakpoint or NetworkBadge visibility rule changes.

## Summary MacBook Chrome report (same session as sticky ribbon overlap): at full desktop header density, the **Dark/Light theme control crowds the “More” nav control** (near-zero gap / apparent overlap). Brand active chrome around “CL8Y DEXSwap” can also look squashed when the center nav column is under horizontal pressure. Bundled with related header-density follow-ups so #136-family layout does not regress again at the **nav → controls** boundary (existing E2E only checks overlap *inside* `nav`). ## Current codebase - `frontend-dapp/src/components/common/Layout.tsx` — `.app-header` grid: brand | `nav.app-desktop-nav` | `.app-header-controls` (theme + `NetworkBadge` + `WalletButton`). - `frontend-dapp/src/components/common/navItems.ts` — `HEADER_FULL_NAV_MIN_WIDTH_PX = 1120` (full inline nav vs compact “Swap + More”). - `frontend-dapp/src/index.css`: - `.app-header` — `grid-template-columns: auto 1fr auto; gap: 20px` - Nav links use `flex-shrink: 0` (cannot compress) - `.app-header-controls` — `gap: 10px` - `.app-header-theme-group` — `flex-shrink: 0; gap: 8px` - `ThemeSegmentedControl.tsx`, `NetworkBadge.tsx`, `WalletButton.tsx` / `WalletChipNetworkIndicator.tsx` — right-side density (duplicate network affordances with the environment ribbon). - `frontend-dapp/e2e/navigation.spec.ts` — asserts nav items do not overlap each other and checks wallet vs More in some cases; **does not assert** last nav control vs first theme button gap at 1120 / 1280 / 1440 with wallet connected on mainnet-width chrome. Closed predecessors: #136 (tablet cram → fold), #170 (theme moved into header), #52 (hide brand copy below 1024px), #186 (wallet chip network label vs width). ## Why a new implementation is needed Raising the full-nav breakpoint and moving theme into the header fixed mid-tablet cram, but at the **lower bound of full desktop nav (~1120–1280)** the non-shrinkable nav + theme + network badge + wallet still compete for width. Reporter’s MacBook Chrome shows More and Dark nearly fused. That is a real usability/hit-target bug and a gap in current overlap tests. Fixing only the vertical ribbon issue will not restore horizontal spacing. ## Constraints / guardrails - Preserve compact nav fold behavior below `HEADER_FULL_NAV_MIN_WIDTH_PX` (#136). - Keep theme toggle in the sticky header on desktop (#170); do not move it back to footer-only. - Prefer one clear network signal: header `NetworkBadge` may be simplified when `EnvironmentRibbon` is visible, but do not remove the ribbon (#138). - Do not shrink touch/hit targets below existing theme/nav button sizes without a11y review. - Brand mark size (56×56 desktop) and “CL8Y DEX” visibility rules (≥1024px) should remain coherent — no collision with active Swap pill. - Changes should be CSS/breakpoint/density only unless a small structural reorder is required; no unrelated nav IA changes. ## Relevant files | Path | Role | |------|------| | `frontend-dapp/src/components/common/Layout.tsx` | Header grid + controls composition | | `frontend-dapp/src/components/common/navItems.ts` | Full-nav min width constant | | `frontend-dapp/src/components/common/ThemeSegmentedControl.tsx` | Dark/Light control | | `frontend-dapp/src/components/common/AppShellNavLink.tsx` | Nav link chrome | | `frontend-dapp/src/components/wallet/NetworkBadge.tsx` | Header network chip | | `frontend-dapp/src/components/wallet/WalletButton.tsx` | Wallet trigger width | | `frontend-dapp/src/index.css` | `.app-header*`, `.app-header-controls`, `.app-header-theme-group`, `.app-brand*` | | `frontend-dapp/e2e/navigation.spec.ts` | Extend overlap assertions | | `skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md` | Header density playbook | | `skills/AGENTS_FRONTEND_THEME_TOGGLE.md` | Theme placement | ## Recommended direction 1. Add Playwright bounding-box assertions: last item in `nav.app-desktop-nav` vs `.app-header-theme-group` (and wallet) at **1120, 1280, 1440** with wallet connected. 2. If failing: raise `HEADER_FULL_NAV_MIN_WIDTH_PX`, tighten nav padding slightly, add `min-gap` / `margin-inline-start` on controls, and/or **hide header `NetworkBadge` when ribbon is present** (ribbon already satisfies #138). 3. Ensure `.app-brand` / brand copy do not compress into the active nav pill at full-nav widths. 4. Document the nav→controls gap rule in `AGENTS_FRONTEND_RESPONSIVE_HEADER.md` so future nav items do not reintroduce cram. ## Acceptance criteria - [ ] At 1120px and 1280px (wallet connected, dark theme), ≥ ~8px horizontal gap between last desktop nav control (e.g. More) and the theme group. - [ ] Theme Dark/Light buttons do not overlap each other or NetworkBadge/Wallet. - [ ] Brand mark remains 56×56 on desktop; “CL8Y DEX” (when shown) does not collide with the active nav pill. - [ ] Compact band (768–1119) still folds to Swap + More without horizontal overflow. - [ ] Existing #136 nav-internal overlap and #170 theme-in-header tests remain green. ## Test plan (all paths) | Path | How | |------|-----| | 1120 / 1280 / 1440, wallet disconnected | Gap nav → theme | | Same widths, wallet connected (+ optional network chip on wallet) | Gap nav → theme → badge → wallet | | Mainnet vs local builds | Longer “Mainnet” badge must not collapse gaps | | Light + dark | Active theme chrome does not reduce effective gap below threshold | | Compact 768–1119 | Fold still correct; theme/network still usable | | Mobile | Header controls rules unchanged relative to bottom nav | | Zoom 110% at 1280 CSS px | Effective width shrink must either keep gap or fold earlier cleanly | ## Test plan (attack / hack / abuse) | Vector | Expectation | |--------|-------------| | Oversized wallet label / truncated address spoof | Chip truncation must not push theme under More or off-screen without fold. | | Theme localStorage garbage values | Fall back to valid theme; layout still gaps correctly. | | Rapid resize across 1120 breakpoint | No stuck overlapping state; fold/expand settles with non-overlapping hit targets. | | Keyboard / screen reader | Theme and More remain separately focusable; no merged click targets. | | Click-through / hit-target steal | Crowded controls must not make More open when intending Dark (or vice versa). | ## Verification criteria - [ ] Reproduced crowding on MacBook Chrome (or CI viewport matrix) before/after. - [ ] New E2E gap assertions pass on CI at listed widths with connected wallet fixture. - [ ] Manual check: More dropdown and theme toggle are distinct hit targets at 1120 and 1280. - [ ] Skills/docs updated if breakpoint or NetworkBadge visibility rule changes.

PlasticDigits commented

2026-07-12 12:11:14 +00:00

(Migrated from gitlab.com)

marked as related to #136