Skip to content

Align brewery tour CTA buttons on /contact - #129

Merged
spizeck merged 1 commit into
mainfrom
fix/issue-128-tour-cta-alignment
Sep 24, 2026
Merged

spizeck merged 1 commit into
mainfrom
fix/issue-128-tour-cta-alignment

Conversation

@spizeck

@spizeck spizeck commented Sep 24, 2026 •

Copy link
Copy Markdown
Owner

Summary

The two side-by-side Brewery Tours cards on /contact rendered their CTA buttons at different vertical positions on desktop, because the right card carries an extra "Stay for a taste" eyebrow line plus slightly longer copy.

Each card is now a flex column with its CTA wrapped in mt-auto pt-5, pinning both buttons to the card bottom so they share a baseline regardless of per-card copy height. The auto margin collapses when the cards stack, so mobile keeps its natural 20px gap with no added blank space.

Closes #128

Changes

  • app/(pages)/contact/page.tsx — both tour cards: p-6 sm:p-8 → flex flex-col p-6 sm:p-8; each TourInquiryCta wrapped in <div className="mt-auto pt-5"> (the CTA's own mt-5 moved onto the wrapper as pt-5).

No copy, pricing, behavior, analytics, or accessibility changes — layout classes only.

Verification

  • npx tsc --noEmit — pass
  • npm run lint — pass
  • npm run build — pass
  • npx playwright test (smoke, tour-inquiry, accessibility, analytics specs — 66/66 pass)
  • Desktop 1440px: CTA bounding boxes identical (0px top/bottom delta), no horizontal overflow
  • Mobile 375px: cards stack, CTA sits at card padding with no extra blank space, no overflow
  • Inquiry dialog still opens with the correct product from each CTA

Not run (judgment call — layout-only change, no logic/env/rules touched): npm ci, check:react-versions, npm test, test:rules, check:md-links. CI will run the full set.

Risk / deployment notes

None — presentational only.

Generated with Devin

Summary by Sourcery

Bug Fixes:

  • Align the Brewery Tours CTA buttons at the bottom of their cards on the contact page while preserving natural spacing when the cards stack on mobile.

Make both tour cards flex columns and pin each CTA to the card bottom
with mt-auto, so the buttons share a baseline at md+ widths regardless
of per-card copy height. The auto margin collapses when stacked, so
mobile keeps its natural pt-5 gap with no extra blank space.

Closes #128

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
@sourcery-ai

sourcery-ai Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

Reviewer's Guide

Aligns the two /contact brewery tour CTA buttons by making each card a flex column and pinning its CTA wrapper to the bottom, while preserving mobile layout and leaving content, behavior, analytics, and accessibility unchanged.

Flow diagram for aligned brewery tour CTA cards

flowchart LR
    A["Brewery Tour card"] --> A1["flex flex-col"]
    B["Tour + tasting card"] --> B1["flex flex-col"]
    A1 --> C["CTA wrapper: mt-auto pt-5"]
    B1 --> C
    C --> D["CTAs share bottom baseline on desktop"]
    C --> E["Natural spacing when cards stack on mobile"]
Loading

File-Level Changes

Change Details Files
Converted both brewery tour cards into flex columns and moved CTA spacing to wrappers that use auto margins to align buttons at the card bottom.
  • Added column flex layout to each card.
  • Wrapped each CTA with mt-auto pt-5 and removed the CTA-level top margin.
  • Preserved natural stacked-card spacing by relying on the auto margin behavior on mobile.
app/(pages)/contact/page.tsx

Assessment against linked issues

Issue Objective Addressed Explanation
#128 Align the two Brewery Tours CTA buttons along the same bottom edge when the cards are displayed side-by-side on desktop. ✅
#128 Implement the alignment using layout-native flex-column and auto-margin behavior so it remains correct when card copy changes, without relying on fixed copy-dependent margins. ✅
#128 Preserve the existing tour content, pricing, CTA behavior, analytics, accessibility, and natural mobile stacking without introducing extra blank space on mobile. ✅

Possibly linked issues


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

@vercel

vercel Bot commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated
deepdivebrewing-web Ready Ready Preview Sep 24, 2026 12:12pm UTC

Request Review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've reviewed your changes and they look great!

Sourcery assessment

Approved.


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

@spizeck
spizeck merged commit 1437d0c into main Sep 24, 2026
4 checks passed
@spizeck
spizeck deleted the fix/issue-128-tour-cta-alignment branch September 24, 2026 12:17

This branch was successfully deployed

1 active deployment
Preview — 87d54895 Deployed Sep 24, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tour card CTA buttons misaligned on /contact

1 participant