feat(web): mobile responsive swap card layout (#426)#474
Merged
Mimah97 merged 2 commits intoJun 30, 2026
Conversation
Implements mobile-first responsive layout across all swap UI components. Changes: - page.tsx: single-column on mobile, side-by-side chart+widget on md+ (max-w-5xl) - SwapWidget: w-full mobile / md:w-[448px] desktop, responsive px, touch-friendly - SwapWidget: TokenPickerButton adds backdrop overlay for mobile tap-to-close - SwapWidget: aria-haspopup + aria-expanded on token picker buttons - SwapWidget: min-h-[44px] on dropdown options, min-h-[52px] CTA on mobile - SwapCard: removed max-w-sm constraint, rounded-2xl, min-h-[52px] button - SwapCard: settings button gets h-9 w-9 touch target + aria-expanded - SwapSettings: flex-wrap slippage buttons, removed max-w-sm, min-h-[40px] btns - SwapConfirmModal: safe-area-inset-bottom for iOS notch, sm:mx-auto centering - Navbar: mobile hamburger menu with aria-expanded, aria-controls, aria-label - Navbar: desktop links hidden on mobile (hidden sm:flex), mobile dropdown panel - Navbar: mobile nav links have min-h-[44px] touch targets - layout.tsx: viewportFit=cover for iOS safe-area support - Add Navbar.test.tsx (13 tests: hamburger menu, a11y, desktop rendering) - Add SwapWidget.test.tsx (26 tests: layout, token picker, states, touch targets)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
app/page.tsx | Single-column on mobile, side-by-side md:flex-row chart + widget on tablet/desktop, max-w-5xl wrapper
app/layout.tsx | Added viewportFit: 'cover' for iOS safe-area inset support
components/SwapWidget.tsx | w-full md:w-[448px], responsive px-3 sm:px-4, backdrop overlay for token picker tap-to-close, aria-haspopup/aria-expanded on picker buttons, min-h-[44px] on dropdown options, min-h-[52px] sm:min-h-[44px] on the CTA
components/SwapCard.tsx | Removed max-w-sm, rounded-2xl, p-4 sm:p-5, settings button gets h-9 w-9 touch target + aria-expanded, min-h-[52px] button on mobile
components/SwapSettings.tsx | flex-wrap on slippage buttons so they wrap on narrow screens, removed max-w-sm, min-h-[40px] on all buttons
components/SwapConfirmModal.tsx | pb-[env(safe-area-inset-bottom,1rem)] for iOS notch, sm:mx-auto centering
components/Navbar.tsx | Full mobile hamburger menu with aria-expanded, aria-controls, aria-label; desktop links hidden with hidden sm:flex; mobile dropdown with min-h-[44px] link tap targets
components/Navbar.test.tsx | 13 new tests: hamburger open/close, aria attributes, accessibility, desktop links
components/SwapWidget.test.tsx | 26 new tests: layout classes, token picker backdrop/aria, touch targets, loading/error/empty states
closes #426