Bug: Tablet — header nav items cramped and overlapping at 768px #52

New issue

Closed

opened 2026-04-06 04:26:29 +00:00 by Brouie · 7 comments

Brouie commented

2026-04-06 04:26:29 +00:00

(Migrated from gitlab.com)

Current behavior: on tablet viewports (iPad Mini 768x1024, iPad Air, Surface Pro 7, Asus Zenbook Fold), the header nav items (Swap, Pool, Limits, Charts, More, wallet) are cramped together. More text overlaps with adjacent nav items at the 768px breakpoint.

Expected behavior: header nav should have adequate spacing at tablet widths. items should not overlap. may need responsive adjustments like condensing labels or switching to a hamburger menu at this breakpoint.

Acceptance criteria:

no text overlap in header nav at 768px width
all nav items tappable without accidental adjacent taps
visual QA pass on iPad Mini (768x1024)
visual QA pass on iPad Air (820x1180)
visual QA pass on Surface Pro 7 (912x1368)
screenshot evidence of fix

tested on 671e72f. screenshot attached in comments.

**Current behavior:** on tablet viewports (iPad Mini 768x1024, iPad Air, Surface Pro 7, Asus Zenbook Fold), the header nav items (Swap, Pool, Limits, Charts, More, wallet) are cramped together. More text overlaps with adjacent nav items at the 768px breakpoint. **Expected behavior:** header nav should have adequate spacing at tablet widths. items should not overlap. may need responsive adjustments like condensing labels or switching to a hamburger menu at this breakpoint. **Acceptance criteria:** - [ ] no text overlap in header nav at 768px width - [ ] all nav items tappable without accidental adjacent taps - [ ] visual QA pass on iPad Mini (768x1024) - [ ] visual QA pass on iPad Air (820x1180) - [ ] visual QA pass on Surface Pro 7 (912x1368) - [ ] screenshot evidence of fix tested on 671e72f. screenshot attached in comments.

Brouie commented

2026-04-06 04:28:34 +00:00

(Migrated from gitlab.com)

{width=603 height=600}

![image.png](/uploads/53b1900546e658b54ae1c4dbbf5996b2/image.png){width=603 height=600}

Brouie commented

2026-04-06 04:29:19 +00:00

(Migrated from gitlab.com)

mentioned in issue #44

Brouie commented

2026-04-06 06:13:45 +00:00

(Migrated from gitlab.com)

mentioned in issue #50

PlasticDigits commented

2026-04-06 12:25:50 +00:00

(Migrated from gitlab.com)

mentioned in commit 415f4aebae

mentioned in commit 415f4aebaef522bf10b120763b9cf05fa6c71d90

PlasticDigits commented

2026-04-06 12:26:01 +00:00

(Migrated from gitlab.com)

Pushed a fix in 415f4ae on main.

Cause: From 768px the desktop header nav appears while the full brand block (kicker + title) was only hidden for ≤767px, so the middle column was starved. Tight gap: 6px plus default flex shrinking let pill labels (notably More) draw into neighbors.

Change: Hide .app-brand-copy for all widths ≤1023px (single rule, replaces the old mobile-only duplicate), set desktop nav gap: 10px, and flex-shrink: 0 on direct nav children. Nav config lives in frontend-dapp/src/components/common/navItems.ts with Vitest + Playwright overlap checks at 768 / 820 / 912px.

@brouie could you verify on iPad Mini / Air / Surface widths and attach a screenshot if anything still feels tight? Leaving the issue open until QA passes.

Pushed a fix in `415f4ae` on `main`. **Cause:** From 768px the desktop header nav appears while the full brand block (kicker + title) was only hidden for ≤767px, so the middle column was starved. Tight `gap: 6px` plus default flex shrinking let pill labels (notably **More**) draw into neighbors. **Change:** Hide `.app-brand-copy` for all widths ≤1023px (single rule, replaces the old mobile-only duplicate), set desktop nav `gap: 10px`, and `flex-shrink: 0` on direct nav children. Nav config lives in `frontend-dapp/src/components/common/navItems.ts` with Vitest + Playwright overlap checks at 768 / 820 / 912px. @brouie could you verify on iPad Mini / Air / Surface widths and attach a screenshot if anything still feels tight? Leaving the issue open until QA passes.

Brouie commented

2026-04-07 03:36:48 +00:00

(Migrated from gitlab.com)

Verified on 38afbf8. Brand text hidden below 1024px, nav gap widened to 10px, flex-shrink:0 on nav links. Header no longer cramped at 768px. Nav items extracted to shared navItems.ts with tests (2 passing). Frontend 214/214.

Verified on 38afbf8. Brand text hidden below 1024px, nav gap widened to 10px, flex-shrink:0 on nav links. Header no longer cramped at 768px. Nav items extracted to shared navItems.ts with tests (2 passing). Frontend 214/214.

Brouie (Migrated from gitlab.com) closed this issue

2026-04-07 03:37:03 +00:00

PlasticDigits commented

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

(Migrated from gitlab.com)

mentioned in issue #483