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 targets for three standalone links that were below the 44px accessibility threshold.

Summary by CodeRabbit

• Accessibility
  • Increased the minimum tap target height to 44px for the “Our Beers,” trade inquiry, and “View all” links.

[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 7, 2026 6:59pm UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 1adb62bc-eb10-4588-a040-e98f46ab0e20

📥 Commits

Reviewing files that changed from the base of the PR and between 7f5bc80 and b659cc2.

📒 Files selected for processing (3)

• app/(pages)/beers/[slug]/page.tsx
• app/(pages)/beers/page.tsx
• app/page.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

Three links across the home and beer pages now have a 44px minimum height. Two links also use inline-flex layout.

Changes

Link Target Sizing

Layer / File(s)	Summary
Update link minimum heights app/page.tsx, app/(pages)/beers/page.tsx, app/(pages)/beers/[slug]/page.tsx	The “View all” and trade inquiry links use inline-flex with a 44px minimum height. The beer breadcrumb link adds a 44px minimum height while retaining its existing layout and hover styling.

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to b659c

The three targeted links now have a 44px minimum height. No merge-blocking issue is evident in the supplied changes.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue [#168] requires a mobile review, comfortable touch targets, no accidental overflow, usable consent UI, documented findings, and fixes for obvious issues. The PR reports a 390px review across the…
Out of Scope Changes check	✅ Passed	The reviewed changes only adjust the homepage beer teaser link, the beer-detail breadcrumb link, and the beers-page trade inquiry link. Each change implements the mobile tap-target objective from issu…
Title check	✅ Passed	The title clearly identifies the mobile tap-target fixes and links them to the 390px audit.
Description check	✅ Passed	The description is detailed and covers the audit scope, findings, fixes, non-changes, and completed verification. It omits the template's full Changes heading, standard verification checklist, and exp…

• 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.

[sourcery-ai]

Sourcery assessment

Approved.

[sourcery-ai]

Sourcery assessment

Approved.