bug: Nav bar items truncated/overlapping on mobile and tablet viewports #16

New issue

Closed

opened 2026-03-13 02:37:53 +00:00 by Brouie · 6 comments

Brouie commented

2026-03-13 02:37:53 +00:00

(Migrated from gitlab.com)

Description

Navigation bar items get cut off and overlap on smaller viewports. CREATE PAIR truncates on most devices, and nav items overlap with the wallet button on tablets.

Affected Viewports

iPhone SE (375x667): CREATE PAIR truncated
Samsung Galaxy S8+ (360x740): CREATE PAIR truncated
Galaxy Z Fold 5 (344x882): Nav items cramped
iPad Mini (768x1024): Nav truncated, wallet overlaps
iPad Air (820x1180): CREATE PAIR truncated
Surface Pro 7 (912x1368): FEE TIERS and CREATE PAIR cut off

Expected

Nav should be responsive — use hamburger menu, icons-only, or scrollable nav on smaller screens.

Steps to Reproduce

Open DEX frontend
Use browser DevTools to simulate mobile/tablet viewports
Observe nav bar truncation

## Description Navigation bar items get cut off and overlap on smaller viewports. CREATE PAIR truncates on most devices, and nav items overlap with the wallet button on tablets. ## Affected Viewports - iPhone SE (375x667): CREATE PAIR truncated - Samsung Galaxy S8+ (360x740): CREATE PAIR truncated - Galaxy Z Fold 5 (344x882): Nav items cramped - iPad Mini (768x1024): Nav truncated, wallet overlaps - iPad Air (820x1180): CREATE PAIR truncated - Surface Pro 7 (912x1368): FEE TIERS and CREATE PAIR cut off ## Expected Nav should be responsive — use hamburger menu, icons-only, or scrollable nav on smaller screens. ## Steps to Reproduce 1. Open DEX frontend 2. Use browser DevTools to simulate mobile/tablet viewports 3. Observe nav bar truncation

Brouie commented

2026-03-13 04:22:44 +00:00

(Migrated from gitlab.com)

mentioned in issue #18

PlasticDigits commented

2026-03-13 06:58:40 +00:00

(Migrated from gitlab.com)

mentioned in merge request !721

PlasticDigits commented

2026-03-13 06:58:43 +00:00

(Migrated from gitlab.com)

Fix implemented in !721: responsive nav bar using icons-only below 1024px to prevent truncation on mobile/tablet. Added aria-label/title for accessibility, overflow-x-auto as fallback. Review requested from @brouie.