Mobile tap-target fixes from the 390px audit (#168)

[spizeck]

Summary

The deliverable from the full mobile-first audit: a 390px sweep across every public route on the integrated polish stack found the site in good shape — this PR applies the only fixes that surfaced, three standalone links below the 44px tap-target floor.

Stacked on feat/polish-integration (the reviewable merge of #188 + #189 + #190). Retargets to main once the stack merges.

Closes #168

Audit method

Programmatic probe at 390×844 with touch emulation across /, /beers, /beers/neipa, /where-to-buy, /about, /contact, /trade, /pay/complete, /pay/cancelled, /privacy, /terms, /trade/login, and the 404 boundary, plus manual Playwright review of the mobile menu, tour dialog, Klaro notice + preferences modal, venue cards, carousel, and footer.

Findings — clean

• No horizontal overflow on any route (scrollWidth == clientWidth everywhere).
• Pill nav, mobile menu, tour dialog, Klaro notice and preferences modal all fit and operate at 390px.
• Carousel cards peek at the viewport edge as designed; filter chips, venue-card actions, footer links, and social icons already carry 44px targets.
• Filter selects go full-width on mobile; no sticky/fixed element other than the intended pill.
• Prose-internal links (privacy/terms bodies, trade page email footer) are inline content — exempt from WCAG 2.5.8 target size and deliberately unchanged.

Fixes

Three standalone links rendered ~17-20px tall — now 44px rows using the established inline-flex min-h-[44px] items-center pattern:

• Homepage View all → (Our Beers teaser header)
• Beer-detail breadcrumb Our Beers
• Beers page Submit a trade inquiry → (For Partners panel)

Deliberate non-changes

• No env(safe-area-inset-*) on the pill nav — its top-4 offset sits below the status-bar cutout in portrait, and landscape notches overlap the side edges, not the top. Verified unnecessary.
• No loading boundary added — routes are static; a loading.tsx would essentially never trigger.
• Menu/dialog behavior untouched — verified correct in earlier PRs of the stack.

Verification

• 390px overflow + tap-target probe (results above)
• Manual screenshots: home, beers, where-to-buy, contact, about, menu-open, tour dialog, Klaro modal, venue cards, footer
• Full test/build/Playwright pass — on this stacked tip next

Generated with Devin

Summary by Sourcery

Bug Fixes:

• Increase the mobile tap-target size of the homepage, beer-detail breadcrumb, and beers-page trade inquiry links to meet the 44px accessibility minimum.

[sourcery-ai]

Sorry @spizeck, this account has used its review budget of 1,500,000 diff characters for the last 7 days.

You can request another review in 4 hours and 46 minutes by commenting @sourcery-ai review. Upgrade to get a review now.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
deepdivebrewing-web	Ready	Preview	Oct 5, 2026 8:19pm UTC

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 377791aa-42d2-467a-b69a-4cd7369b8d97

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
🔒 Security Review	✅ Completed 2026-10-05T18:58:28.778491Z	7d7f332	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

This PR implements the only issues found in a 390px mobile audit: three standalone links now render as vertically centered 44px rows via Tailwind utility classes. The broader audit found no overflow or interaction issues, and intentionally leaves safe-area handling, loading boundaries, and menu/dialog behavior unchanged; full automated validation remains pending on the stacked branch.

File-Level Changes

Change	Details	Files
Raised three standalone mobile links to the 44px minimum tap-target height while preserving their existing visual styling and navigation behavior.	Applied the established inline-flex min-h-[44px] items-center pattern to the beer-detail breadcrumb. Applied the same target-size treatment to the beers-page trade inquiry link. Applied the same target-size treatment to the homepage beer-section link.	app/(pages)/beers/[slug]/page.tsx app/(pages)/beers/page.tsx app/page.tsx

Possibly linked issues

• Run a mobile-first UX and art-direction audit of all major public routes #168: PR is the audit deliverable, documenting route-wide mobile checks and fixing three undersized links.
• Run a mobile-first UX and art-direction audit of all major public routes #168: PR applies three tap-target fixes discovered during the comprehensive mobile audit requested by issue Run a mobile-first UX and art-direction audit of all major public routes #168.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.