Header nav items crammed into single row at mid-range tablet viewport no responsive collapse #136
Labels
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:implement
agent:implement
agent:open_issues
agent:ready
agent:research
agent:security_audit
agent:verify
architecture
backend
blocker:hybrid
blocker:launch
blocker:limit-orders
blocker:v2
block:log_only
block:security
bug
ci
contracts
correctness
deploy
dev
devops
docs
documentation
duplicate
e2e
enhancement
epic
feature
frontend
functional-completion
gas
good first issue
governance
help wanted
high-risk
hooks
hybrid
indexer
infra
infrastructure
integrators
invalid
launch-blocker
limit-orders
localnet
localterra
low priority
missing-implementation
needs-design
ops
performance
priority
high
priority
medium
product
qa
QA
question
ready
ready
research
scripts
security
security-hardening
smartcontracts
tech-debt
testing
ux
UX
v2
verification
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
code/cl8y-dex-terraclassic#136
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
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
/trader/...,/trade,/swap)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.
Environment Details
localterra(local Docker)VITE_NETWORK=local npm run devWallet / Device Details
Screenshots
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
mentioned in commit
8c45a2db98Fix landed on
main(commit8c45a2d)Summary
Mid-range tablet widths (768px–1023px) no longer render every primary nav pill inline with wallet/network controls.
LayoutusesuseMediaQueryatHEADER_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.≥1024pxkeeps 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_ITEMSroutes so Pool/Trade tabs do not falsely highlight More.Docs / agent cross-links
skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.mdskills/AGENTS_FRONTEND_PRODUCTION_BUILD.mdVerification checklist (manual / CI)
773×743responsive mode: header shows Swap + More only (no inline Pool/Limits/Trade/Charts); wallet + network controls readable without overlap.≥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 stillMORE_NAV_ITEMSonly + theme controls.npm test(Vitest) andREQUIRE_LOCALTERRA=0 npx playwright test e2e/navigation.spec.tspass 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.
mentioned in issue #116
mentioned in issue #146
It is all good, the nav bar isn't cramming into each other as initially reported. Good to close @PlasticDigits
Good finding, fix landed - for future @totdking please fill out checklist when requesting close
Regression
While using the protocol , this issue resurfaced. Below is a screen record of what was noticed
Screen Record
cc: @PlasticDigits
mentioned in commit
fd25839cb3Fix on
main(commitfd25839)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) andNetworkBadge.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
skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md— rule 4 (no kicker reintroduction)Verification checklist
CL8Y DEX · Terra ClassicREQUIRE_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
Verification checklist
CL8Y DEX · Terra ClassicREQUIRE_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
cc: @PlasticDigits
mentioned in commit
3d96182d39Follow-up fix on
main(commit3d96182)Summary
The 1024px–1098px cram band was still showing the full primary nav row because
HEADER_FULL_NAV_MIN_WIDTH_PXwas 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_PXfrom 1024 → 1120 and addedTABLET_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
navItems.test.ts(breakpoint constants)Docs / agent cross-links
skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.mdVerification checklist
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
Verification checklist
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
mentioned in issue #212
mentioned in issue #482
marked as related to #482
mentioned in issue #483
marked as related to #483
mentioned in merge request !1019
mentioned in issue #486
mentioned in issue #619
mentioned in issue #663