Header nav items crammed into single row at mid-range tablet viewport no responsive collapse #136

Closed
opened 2026-05-06 14:35:20 +00:00 by totdking · 23 comments
totdking commented 2026-05-06 14:35:20 +00:00 (Migrated from gitlab.com)
No description provided.
totdking commented 2026-05-06 14:37:35 +00:00 (Migrated from gitlab.com)

Issue Summary

At 773×743 viewport width, the header navigation renders all items (Swap, Pool, Limits, Trade, Charts, More, CL toggle, Local badge, wallet chip) inline on a single row with no responsive collapse. The header does not adapt to mid-range tablet widths. It neither drops to a mobile hamburger/drawer pattern nor has sufficient horizontal space to render at desktop density without crowding.


Reproduction Steps

  1. Open the app in Chrome
  2. Open DevTools → toggle device toolbar (Cmd+Shift+M)
  3. Set dimensions to 773×743, mode: Responsive
  4. Navigate to any route (e.g. /trader/..., /trade, /swap)
  5. Observe the header navigation row

Expected Behavior

At 773px width the header should either collapse nav links into a hamburger/drawer menu, or the "More" dropdown should absorb overflow items keeping the header uncluttered and all CTAs reachable without crowding.


Actual Behavior

All nav items render inline on a single row with no collapse or overflow strategy. Items are visually cramped at this breakpoint. No hamburger menu, no item truncation, and no drawer pattern is applied.

image.png{width="900" height="584"}


Environment Details

Field Value
OS macOS (Apple M1 Pro, 14-inch)
Browser Google Chrome (desktop, DevTools responsive mode)
Viewport 773×743
Network localterra (local Docker)
Frontend VITE_NETWORK=local npm run dev

Wallet / Device Details

  • Wallet: Keplr browser extension
  • Wallet state: Connected

Screenshots

See attached screenshots showing the crammed header nav at 773×743 with all items rendered inline and no responsive collapse applied.

image.png{width="900" height="584"}


Severity / Impact

P2 Polish. No functionality is broken, all nav items are still tappable, but the layout is visually cramped and does not meet expected responsive behaviour for a mid-range tablet breakpoint. Affects all routes.

cc: @PlasticDigits

### Issue Summary At 773×743 viewport width, the header navigation renders all items (Swap, Pool, Limits, Trade, Charts, More, CL toggle, Local badge, wallet chip) inline on a single row with no responsive collapse. The header does not adapt to mid-range tablet widths. It neither drops to a mobile hamburger/drawer pattern nor has sufficient horizontal space to render at desktop density without crowding. --- ### Reproduction Steps 1. Open the app in Chrome 2. Open DevTools → toggle device toolbar (Cmd+Shift+M) 3. Set dimensions to **773×743**, mode: Responsive 4. Navigate to any route (e.g. `/trader/...`, `/trade`, `/swap`) 5. Observe the header navigation row --- ### Expected Behavior At 773px width the header should either collapse nav links into a hamburger/drawer menu, or the "More" dropdown should absorb overflow items keeping the header uncluttered and all CTAs reachable without crowding. --- ### Actual Behavior All nav items render inline on a single row with no collapse or overflow strategy. Items are visually cramped at this breakpoint. No hamburger menu, no item truncation, and no drawer pattern is applied. ![image.png](/uploads/c3d2af1c7c379e31c41979cab00bb8b1/image.png){width="900" height="584"} --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop, DevTools responsive mode) | | Viewport | 773×743 | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` | --- ### Wallet / Device Details - **Wallet:** Keplr browser extension - **Wallet state:** Connected --- ### Screenshots > See attached screenshots showing the crammed header nav at 773×743 with all items rendered inline and no responsive collapse applied. ![image.png](/uploads/c6a4d1e7afed99bff16c181f1cd127db/image.png){width="900" height="584"} --- ### Severity / Impact **P2 Polish.** No functionality is broken, all nav items are still tappable, but the layout is visually cramped and does not meet expected responsive behaviour for a mid-range tablet breakpoint. Affects all routes. cc: @PlasticDigits
PlasticDigits commented 2026-05-06 15:08:04 +00:00 (Migrated from gitlab.com)

mentioned in commit 8c45a2db98

mentioned in commit 8c45a2db98645b60795d483720298157473dff01
PlasticDigits commented 2026-05-06 15:08:17 +00:00 (Migrated from gitlab.com)

Fix landed on main (commit 8c45a2d)

Summary

Mid-range tablet widths (768px–1023px) no longer render every primary nav pill inline with wallet/network controls. Layout uses useMediaQuery at HEADER_FULL_NAV_MIN_WIDTH_PX (1024) so Pool / Limits / Trade / Charts move into the header More menu (before Trader, Protocol, Fee Tiers, Create Pair); Swap stays inline. ≥1024px keeps the original full primary row + More-only dropdown.

Active-state split: header More uses the expanded menu list on tablet compact; bottom-tab More on mobile still highlights only MORE_NAV_ITEMS routes so Pool/Trade tabs do not falsely highlight More.

Verification checklist (manual / CI)

  • 773×743 responsive mode: header shows Swap + More only (no inline Pool/Limits/Trade/Charts); wallet + network controls readable without overlap.
  • Open More: menu contains Pool, Limits, Trade, Charts, then existing secondary links; navigation works.
  • ≥1024px: full primary row restored; More lists only Trader / Protocol / Fee Tiers / Create Pair (unchanged wide-desktop behavior).
  • ≤767px: bottom tab bar unchanged; More sheet still MORE_NAV_ITEMS only + theme controls.
  • npm test (Vitest) and REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts pass locally when convenient.

Request

@totdking — please re-check the repro viewport and confirm this matches the expected responsive behavior. Leaving the issue open until you sign off.

## Fix landed on `main` (commit `8c45a2d`) ### Summary Mid-range tablet widths (**768px–1023px**) no longer render every primary nav pill inline with wallet/network controls. **`Layout`** uses **`useMediaQuery`** at **`HEADER_FULL_NAV_MIN_WIDTH_PX` (1024)** so **Pool / Limits / Trade / Charts** move into the header **More** menu (before Trader, Protocol, Fee Tiers, Create Pair); **Swap** stays inline. **`≥1024px`** keeps the original full primary row + More-only dropdown. Active-state split: header **More** uses the expanded menu list on tablet compact; bottom-tab **More** on mobile still highlights only **`MORE_NAV_ITEMS`** routes so Pool/Trade tabs do not falsely highlight **More**. ### Docs / agent cross-links - [docs/frontend.md — Responsive shell & header navigation](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/frontend.md#responsive-header-navigation) - [docs/testing.md — Playwright header note](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/testing.md) - New playbook: [`skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md) - Related row added in [`skills/AGENTS_FRONTEND_PRODUCTION_BUILD.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_PRODUCTION_BUILD.md) ### Verification checklist (manual / CI) - [ ] **`773×743` responsive mode**: header shows **Swap** + **More** only (no inline Pool/Limits/Trade/Charts); wallet + network controls readable without overlap. - [ ] Open **More**: menu contains **Pool**, **Limits**, **Trade**, **Charts**, then existing secondary links; navigation works. - [ ] **`≥1024px`**: full primary row restored; **More** lists only Trader / Protocol / Fee Tiers / Create Pair (unchanged wide-desktop behavior). - [ ] **`≤767px`**: bottom tab bar unchanged; **More** sheet still **`MORE_NAV_ITEMS` only** + theme controls. - [ ] **`npm test`** (Vitest) and **`REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts`** pass locally when convenient. ### Request @totdking — please re-check the repro viewport and confirm this matches the expected responsive behavior. Leaving the issue **open** until you sign off.
totdking commented 2026-05-06 16:19:14 +00:00 (Migrated from gitlab.com)

mentioned in issue #116

mentioned in issue #116
Brouie commented 2026-05-07 06:40:36 +00:00 (Migrated from gitlab.com)

mentioned in issue #146

mentioned in issue #146
totdking commented 2026-05-07 17:38:20 +00:00 (Migrated from gitlab.com)

It is all good, the nav bar isn't cramming into each other as initially reported. Good to close @PlasticDigits

It is all good, the nav bar isn't cramming into each other as initially reported. Good to close @PlasticDigits
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-08 13:29:07 +00:00
PlasticDigits commented 2026-05-08 13:29:08 +00:00 (Migrated from gitlab.com)

Good finding, fix landed - for future @totdking please fill out checklist when requesting close

Good finding, fix landed - for future @totdking please fill out checklist when requesting close
totdking commented 2026-05-22 11:51:36 +00:00 (Migrated from gitlab.com)

Regression

While using the protocol , this issue resurfaced. Below is a screen record of what was noticed

Screen Record

Screen Recording 2026-05-22 at 12.48.26.mov

cc: @PlasticDigits

## Regression While using the protocol , this issue resurfaced. Below is a screen record of what was noticed ## Screen Record ![Screen Recording 2026-05-22 at 12.48.26.mov](/uploads/688be03a157c4b1b883587be3e17d42c/Screen_Recording_2026-05-22_at_12.48.26.mov) cc: @PlasticDigits
totdking (Migrated from gitlab.com) reopened this issue 2026-05-22 11:51:36 +00:00
PlasticDigits commented 2026-05-25 02:07:19 +00:00 (Migrated from gitlab.com)

mentioned in commit fd25839cb3

mentioned in commit fd25839cb36374029d193490be7f3b270a2a3e3e
PlasticDigits commented 2026-05-25 02:07:40 +00:00 (Migrated from gitlab.com)

Fix on main (commit fd25839)

Summary

Regression at mid-range tablet header widths was traced to horizontal pressure from the sticky header brand kicker line "Terra Classic ecosystem" sitting above CL8Y DEX. That secondary line is removed; the header brand is now logo + "CL8Y DEX" title only. Terra Classic context remains in the footer (CL8Y DEX · Terra Classic) and NetworkBadge.

Tablet compact nav behavior from the earlier #136 fix is unchanged: 768px–1023px still shows Swap inline + More (Pool/Limits/Trade/Charts inside More); ≥1024px keeps the full primary row.

Verification checklist

  • 773×743 (and iPad-class widths): header Swap + More row has no horizontal overlap with wallet/network controls
  • Open header More at tablet width: Pool, Limits, Trade, Charts present and navigable
  • ≥1024px: full primary nav row; header brand shows CL8Y DEX only (no "Terra Classic ecosystem" kicker)
  • ≤767px: bottom tab bar unchanged; mobile More sheet still secondary routes + theme only
  • Footer still shows CL8Y DEX · Terra Classic
  • Optional CI/local: REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|CL8Y DEX branding|Full desktop header"

Request

@brouie — please verify the repro viewport / screen recording from the May regression note and confirm header density looks correct. Leaving the issue open until signed off.

cc @totdking

## Fix on `main` (commit `fd25839`) ### Summary Regression at mid-range tablet header widths was traced to horizontal pressure from the sticky header brand **kicker** line **"Terra Classic ecosystem"** sitting above **CL8Y DEX**. That secondary line is removed; the header brand is now **logo + "CL8Y DEX" title only**. Terra Classic context remains in the footer (`CL8Y DEX · Terra Classic`) and `NetworkBadge`. Tablet compact nav behavior from the earlier #136 fix is unchanged: **768px–1023px** still shows **Swap** inline + **More** (Pool/Limits/Trade/Charts inside More); **≥1024px** keeps the full primary row. ### Docs / agent cross-links - [docs/frontend.md — Responsive shell & header navigation](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/frontend.md#responsive-header-navigation) — new **Header brand copy** invariant row - [docs/testing.md — Playwright header note](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/testing.md) - [`skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md) — rule 4 (no kicker reintroduction) ### Verification checklist - [ ] **773×743** (and iPad-class widths): header **Swap + More** row has **no horizontal overlap** with wallet/network controls - [ ] Open header **More** at tablet width: **Pool**, **Limits**, **Trade**, **Charts** present and navigable - [ ] **≥1024px**: full primary nav row; header brand shows **CL8Y DEX** only (no "Terra Classic ecosystem" kicker) - [ ] **≤767px**: bottom tab bar unchanged; mobile **More** sheet still secondary routes + theme only - [ ] Footer still shows **`CL8Y DEX · Terra Classic`** - [ ] Optional CI/local: `REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|CL8Y DEX branding|Full desktop header"` ### Request @brouie — please verify the repro viewport / screen recording from the May regression note and confirm header density looks correct. Leaving the issue **open** until signed off. cc @totdking
totdking commented 2026-05-26 11:21:38 +00:00 (Migrated from gitlab.com)

Verification checklist

  • 773×743 (and iPad-class widths): header Swap + More row has no horizontal overlap with wallet/network controls
  • Open header More at tablet width: Pool, Limits, Trade, Charts present and navigable
  • ≥1024px: full primary nav row; header brand shows CL8Y DEX only (no "Terra Classic ecosystem" kicker)
  • ≤767px: bottom tab bar unchanged; mobile More sheet still secondary routes + theme only
  • Footer still shows CL8Y DEX · Terra Classic
  • Optional CI/local: REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|CL8Y DEX branding|Full desktop header"

Issues noticed

Nav bar still crams into each other at horizontal length 1024px to ~1098 px horizontally

Screen Record

Screen Recording 2026-05-26 at 12.03.40.mov{width="900" height="548"}

cc: @PlasticDigits

### Verification checklist * [x] **773×743** (and iPad-class widths): header **Swap + More** row has **no horizontal overlap** with wallet/network controls * [x] Open header **More** at tablet width: **Pool**, **Limits**, **Trade**, **Charts** present and navigable * [x] **≥1024px**: full primary nav row; header brand shows **CL8Y DEX** only (no "Terra Classic ecosystem" kicker) * [x] **≤767px**: bottom tab bar unchanged; mobile **More** sheet still secondary routes + theme only * [x] Footer still shows **`CL8Y DEX · Terra Classic`** * [ ] Optional CI/local: `REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|CL8Y DEX branding|Full desktop header"` ## Issues noticed Nav bar still crams into each other at horizontal length 1024px to \~1098 px horizontally **Screen Record** ![Screen Recording 2026-05-26 at 12.03.40.mov](/uploads/4b4e03bf75587d30794d64cde5905bc2/Screen_Recording_2026-05-26_at_12.03.40.mov){width="900" height="548"} cc: @PlasticDigits
PlasticDigits commented 2026-05-26 11:28:45 +00:00 (Migrated from gitlab.com)

mentioned in commit 3d96182d39

mentioned in commit 3d96182d39d346145a3bbf150826fe8fcc917cf1
PlasticDigits commented 2026-05-26 11:29:35 +00:00 (Migrated from gitlab.com)

Follow-up fix on main (commit 3d96182)

Summary

The 1024px–1098px cram band was still showing the full primary nav row because HEADER_FULL_NAV_MIN_WIDTH_PX was 1024. At that width the sticky header also reveals the CL8Y DEX brand title and wallet/network controls, so Swap/Pool/Limits/Trade/Charts/More overlapped again.

Change: raised HEADER_FULL_NAV_MIN_WIDTH_PX from 1024 → 1120 and added TABLET_COMPACT_HEADER_MAX_WIDTH_PX (1119). Tablet-compact behavior (Swap + More inline; Pool/Limits/Trade/Charts inside header More) now covers 768px–1119px, including the reported cram band.

Verification performed

  • Vitest: navItems.test.ts (breakpoint constants)
  • Playwright: overlap tests at 773, 768, 820, 912, 1024, 1050, 1098 (compact) and 1120, 1280 (full desktop); connected-wallet vs More non-overlap at 773, 1024, 1098
  • MCP browser manual check at 1024, 1098 (Swap + More only) and 1120 (full primary row)

Verification checklist

  • 1024×800 and 1098×800: header shows Swap + More only; no horizontal overlap with theme toggle / network badge / wallet chip
  • Open header More at those widths: Pool, Limits, Trade, Charts present and navigable
  • ≥1120px: full primary nav row restored; More lists only Trader / Protocol / Fee Tiers / Create Pair
  • 773×743 and ≤767px mobile bottom nav unchanged
  • Optional: REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|Full desktop header|connected wallet chip does not overlap"

Request

@brouie — please verify at 1024px–1098px (especially with wallet connected) and confirm the header no longer crams. Leaving the issue open until signed off.

cc @totdking

## Follow-up fix on `main` (commit `3d96182`) ### Summary The **1024px–1098px** cram band was still showing the **full primary nav row** because `HEADER_FULL_NAV_MIN_WIDTH_PX` was **1024**. At that width the sticky header also reveals the **CL8Y DEX** brand title and wallet/network controls, so Swap/Pool/Limits/Trade/Charts/More overlapped again. **Change:** raised `HEADER_FULL_NAV_MIN_WIDTH_PX` from **1024 → 1120** and added `TABLET_COMPACT_HEADER_MAX_WIDTH_PX` (`1119`). Tablet-compact behavior (**Swap + More** inline; Pool/Limits/Trade/Charts inside header **More**) now covers **768px–1119px**, including the reported cram band. ### Verification performed - Vitest: `navItems.test.ts` (breakpoint constants) - Playwright: overlap tests at **773, 768, 820, 912, 1024, 1050, 1098** (compact) and **1120, 1280** (full desktop); connected-wallet vs **More** non-overlap at **773, 1024, 1098** - MCP browser manual check at **1024**, **1098** (Swap + More only) and **1120** (full primary row) ### Docs / agent cross-links - [docs/frontend.md — Responsive shell & header navigation](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/frontend.md#responsive-header-navigation) — updated tablet/full-desktop invariant rows - [docs/testing.md — Playwright header note](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/testing.md) - [`skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md) ### Verification checklist - [ ] **1024×800** and **1098×800**: header shows **Swap + More** only; no horizontal overlap with theme toggle / network badge / wallet chip - [ ] Open header **More** at those widths: **Pool**, **Limits**, **Trade**, **Charts** present and navigable - [ ] **≥1120px**: full primary nav row restored; **More** lists only Trader / Protocol / Fee Tiers / Create Pair - [ ] **773×743** and **≤767px** mobile bottom nav unchanged - [ ] Optional: `REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|Full desktop header|connected wallet chip does not overlap"` ### Request @brouie — please verify at **1024px–1098px** (especially with wallet connected) and confirm the header no longer crams. Leaving the issue **open** until signed off. cc @totdking
totdking commented 2026-05-26 11:43:28 +00:00 (Migrated from gitlab.com)

Verification checklist

  • 1024×800 and 1098×800: header shows Swap + More only; no horizontal overlap with theme toggle / network badge / wallet chip
  • Open header More at those widths: Pool, Limits, Trade, Charts present and navigable
  • ≥1120px: full primary nav row restored; More lists only Trader / Protocol / Fee Tiers / Create Pair
  • 773×743 and ≤767px mobile bottom nav unchanged
  • Optional: REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|Full desktop header|connected wallet chip does not overlap"

Looks good for close 👍

cc: @PlasticDigits

### Verification checklist * [x] **1024×800** and **1098×800**: header shows **Swap + More** only; no horizontal overlap with theme toggle / network badge / wallet chip * [x] Open header **More** at those widths: **Pool**, **Limits**, **Trade**, **Charts** present and navigable * [x] **≥1120px**: full primary nav row restored; **More** lists only Trader / Protocol / Fee Tiers / Create Pair * [x] **773×743** and **≤767px** mobile bottom nav unchanged * [ ] Optional: `REQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.ts -g "GitLab #136|Full desktop header|connected wallet chip does not overlap"` Looks good for close :thumbsup: cc: @PlasticDigits
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-26 11:44:12 +00:00
PlasticDigits commented 2026-05-29 03:13:59 +00:00 (Migrated from gitlab.com)

mentioned in issue #212

mentioned in issue #212
PlasticDigits commented 2026-07-12 12:11:07 +00:00 (Migrated from gitlab.com)

mentioned in issue #482

mentioned in issue #482
PlasticDigits commented 2026-07-12 12:11:07 +00:00 (Migrated from gitlab.com)

marked as related to #482

marked as related to #482
PlasticDigits commented 2026-07-12 12:11:14 +00:00 (Migrated from gitlab.com)

mentioned in issue #483

mentioned in issue #483
PlasticDigits commented 2026-07-12 12:11:14 +00:00 (Migrated from gitlab.com)

marked as related to #483

marked as related to #483
PlasticDigits commented 2026-07-13 01:20:32 +00:00 (Migrated from gitlab.com)

mentioned in merge request !1019

mentioned in merge request !1019
PlasticDigits commented 2026-07-13 11:54:32 +00:00 (Migrated from gitlab.com)

mentioned in issue #486

mentioned in issue #486
PlasticDigits commented 2026-08-24 03:15:45 +00:00 (Migrated from gitlab.com)

mentioned in issue #619

mentioned in issue #619
PlasticDigits commented 2026-08-26 04:13:33 +00:00 (Migrated from gitlab.com)

mentioned in issue #663

mentioned in issue #663
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
code/cl8y-dex-terraclassic#136
No description provided.