Skip to content

fix: add padding to hero CTA buttons on mobile #362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brendanjryan merged 1 commit into from
Mar 18, 2026
Merged

fix: add padding to hero CTA buttons on mobile #362

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,10 +499,10 @@ function Hero() {
</div>
<div className="hero-right">
<Tagline />
<div className="flex items-center gap-4 mt-3 landing-ctas">
<div className="flex items-center gap-3 sm:gap-4 mt-3 px-4 sm:px-0 landing-ctas">

@chatgpt-codex-connector chatgpt-codex-connector Bot Mar 18, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Keep the CTA mobile padding through the 768px layout switch

LandingPage.tsx treats <=767px as the mobile hero layout (@media (max-width: 767px) and @media (min-width: 768px) in the same file), but this new sm: class drops the CTA padding at Tailwind’s 640px breakpoint. On 640–767px screens—such as small tablets and foldables in portrait—the hero is still stacked like mobile while the CTA row has already switched back to the desktop spacing, so the buttons sit flush to the edges again. Matching this breakpoint to the existing 768px mobile/tablet split would make the fix apply consistently.

Useful? React with 👍 / 👎.

<Link
to="/quickstart/agent"
className="no-underline! px-5 py-2.5 rounded-lg transition-opacity hover:opacity-80"
className="no-underline! px-3 sm:px-5 py-2.5 rounded-lg transition-opacity hover:opacity-80"
style={{
fontSize: "0.9375rem",
fontWeight: 500,
Expand All @@ -521,7 +521,7 @@ function Hero() {
</Link>
<Link
to="/quickstart/server"
className="no-underline! px-5 py-2.5 rounded-lg transition-opacity hover:opacity-80"
className="no-underline! px-3 sm:px-5 py-2.5 rounded-lg transition-opacity hover:opacity-80"
style={{
fontSize: "0.9375rem",
fontWeight: 500,
Expand Down
Loading