fix(site): pricing page mobile above-fold visibility#7764
Conversation
On mobile, the H1 and hero padding consumed the entire viewport, pushing all pricing plans below the fold. Reduces heading size, spacing, and padding at mobile breakpoints so at least one plan card is visible without scrolling. Desktop layout unchanged. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughAdjusted responsive spacing and typography in the pricing hero and pricing sections: reduced small-screen hero padding, gap, title and description sizes, and lowered small-screen pricing section padding while preserving md breakpoint values. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/site/src/app/pricing/pricing-hero-plans.tsx (1)
40-63: Consider testing on tablet viewports (768px-1024px).The changes use Tailwind's
md:breakpoint (768px) to restore desktop values. This means tablets in portrait mode (768px-820px) will use the larger desktop spacing and typography. While this is likely fine, the test plan could be enhanced to explicitly verify the layout on tablet devices to ensure the above-fold visibility goal is also met on tablets, particularly smaller ones (iPad Mini, etc.).This is not a blocking issue—the implementation correctly achieves the mobile optimization objective. Just a thoroughness suggestion for the testing phase.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/pricing/pricing-hero-plans.tsx` around lines 40 - 63, The layout uses Tailwind's md: breakpoint (e.g., the md: prefixed classes on the section, h1, and paragraph in pricing-hero-plans.tsx and the Badge component) which will apply desktop spacing/typography at 768px; add explicit QA/tests for tablet viewports (768–1024px) to verify spacing, font sizes, and above-the-fold visibility on smaller tablets (portrait iPad, iPad Mini) — check the section with className "relative pt-16 pb-8 md:pt-28 md:pb-16 px-4", the h1 ("text-3xl md:text-7xl"), and paragraph ("text-base md:text-xl") and confirm adjustments or additional breakpoint tweaks if elements are clipping or pushing content below the fold.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/site/src/app/pricing/pricing-hero-plans.tsx`:
- Around line 40-63: The layout uses Tailwind's md: breakpoint (e.g., the md:
prefixed classes on the section, h1, and paragraph in pricing-hero-plans.tsx and
the Badge component) which will apply desktop spacing/typography at 768px; add
explicit QA/tests for tablet viewports (768–1024px) to verify spacing, font
sizes, and above-the-fold visibility on smaller tablets (portrait iPad, iPad
Mini) — check the section with className "relative pt-16 pb-8 md:pt-28 md:pb-16
px-4", the h1 ("text-3xl md:text-7xl"), and paragraph ("text-base md:text-xl")
and confirm adjustments or additional breakpoint tweaks if elements are clipping
or pushing content below the fold.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 70124253-fee1-44cc-9109-cc944a99303b
📒 Files selected for processing (1)
apps/site/src/app/pricing/pricing-hero-plans.tsx
2 participants
Summary
text-5xl→text-3xl), subtitle size, section padding, and element gaps on mobile breakpointsmd:prefixed classes to preserve original valuesContext
SEO audit item #12: "No pricing info visible above fold on mobile — H1 consumes entire viewport." This impacts mobile UX, conversion rate, and Google's mobile-first indexing.
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit