feat(ui): make the app mobile-responsive#209
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The redesign was built desktop-first with no media queries below 800px. This adds a three-tier responsive treatment (mobile <=640 / tablet 641-1024 / desktop >1024, matching Tailwind sm/md/lg) across the app shell and the three main pages. - Navbar.tsx: useState-driven hamburger that exposes all primary + more links in a single flat panel on <md viewports; closes on route change; px padding tightened. - app/page.tsx (landing): hero CTAs stack with w-full sm:w-auto, preview grid collapses to single column below lg, section padding scales with viewport. - app/dashboard/page.tsx: page padding scaled; hero (map + Quick log) and log + DXpeditions grids drop to single column at lg; band-activity strip wraps to a 4-col grid on mobile. The 7-column QSO table renders as stacked QSO cards on <md via a parallel md:hidden tree over the same filteredContacts (no <Table> changes). - app/new-contact/page.tsx: page padding; outer layout single-col below xl; callsign mega-input scales 32->56px; lookup card grid restructures with Verified chip spanning columns on mobile; action footer reverses with Save QSO on top. Verified: lint, typecheck, build all clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
patrickrb
force-pushed
the
feat/responsive-design
branch
from
82fbaca to
8e6c045
Compare
patrickrb
changed the title
The footer was layering DialogFooter's default `flex-col-reverse` with a local `flex justify-between`, producing an awkward Cancel | Save row above an orphaned Delete QSO button on narrow viewports. Drop the wrapper `<div>` around the AlertDialog and let it become a direct DialogFooter child. On mobile, every button stretches `w-full` and stacks in the order Save Changes → Cancel → Delete QSO (the destructive action lives at the bottom, away from the primary tap target). On `sm` and up, Delete sits on the left and Cancel/Save group sits on the right via `sm:justify-between` + `sm:ml-auto` (works the same with or without onDelete). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Summary
sm/md/lg) across the app shell and the three main pages.Navbar.tsx(useState-toggled, closes on route change) flattens primary + more links into a single mobile panel.mdvia a parallelmd:hiddentree over the samefilteredContacts— no changes to<Table>itself.What changed
components/Navbar.tsx— mobile hamburger button, tighter px padding, mobile panel rendering bothPRIMARY_LINKSandMORE_LINKS.app/page.tsx(landing) — hero CTAs stackw-full sm:w-auto; preview content grid drops to single column belowlg; section padding scales with viewport.app/dashboard/page.tsx— page padding; hero (map + quick log) and log + DXpeditions grids drop atlg; band-activity strip becomes 4-col grid belowmd; toolbar wraps with search on its own row; mobile QSO card list via a smallMobileCardRowhelper.app/new-contact/page.tsx— page padding; outer layout single column belowxl; callsign mega-inputtext-[32px] sm:text-[56px]; lookup card grid restructures with the Verified chip spanning columns on mobile; action footer reverses with Save QSO on top.Test plan
npm run dev, open Chrome devtools device toolbar/,/dashboard,/new-contact:<body>lg)npm run lint && npm run typecheck && npm run build— all clean (verified locally)🤖 Generated with Claude Code