fix(site): consistent layout across all pages#7770
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis pull request systematically updates heading typography and overlay styling across 30+ marketing pages. Changes include converting headings to responsive Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Observations & GuidanceThis is a well-scoped, homogeneous refactoring with a clear, repeating pattern—you'll notice immediately that I've categorized this as requiring simple review effort. However, here's what to watch for as you validate:
🚥 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.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/site/src/app/pricing/pricing-hero-plans.tsx (1)
40-42: Consider removing or defininghero/contentclass hooks.Line 40 (
hero) and Line 42 (content) appear to be no-op class tokens in the current site stylesheet context. If they’re not shared hooks yet, removing them reduces ambiguity; if they are intended hooks, add their definitions in global CSS for clarity and reuse.🤖 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 - 42, The JSX uses two ambiguous class tokens "hero" and "content" on the section and inner div which appear to be no-ops; either remove these class names from the section and div in the PricingHeroPlans JSX if they are unused, or add clear definitions for .hero and .content in the global stylesheet (or Tailwind config/partials) so they provide consistent layout hooks; update the component markup (the <section> with class "hero ..." and the inner div with class "content ...") accordingly and ensure no visual regressions by verifying the layout after removing or defining them.apps/site/src/app/(prisma-with)/react/page.tsx (1)
22-22: Keep code examples framework-agnostic and portable.These snippets now include website-specific utility classes that won’t exist in most user projects. For copy/paste examples, prefer neutral markup (or generic classes) to avoid confusing readers.
Suggested change
- <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1> + <h1>Users</h1>- <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1> + <h1>Users</h1>Also applies to: 44-44
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/site/src/app/`(prisma-with)/react/page.tsx at line 22, The H1 element in apps/site/src/app/(prisma-with)/react/page.tsx uses framework-specific utility classes ("text-4xl sm:text-5xl md:text-6xl stretch-display ...") which makes the example non-portable; update the <h1> markup (and the similar element at the second occurrence referenced) to use neutral markup or generic class names (e.g., plain <h1> with no framework utilities or a single generic class like "heading") so the example is framework-agnostic and copy/paste friendly, ensuring the visual intent is preserved without relying on project-specific utility classes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/support/page.tsx`:
- Around line 40-41: The hero title (<h1 className="...">) is being rendered
beneath the gradient overlay div (the div with class "absolute inset-0 ...
z-1"), so add positioning and a higher stacking context to the <h1> (e.g., make
the <h1> relative or given a z-index utility like "relative z-10") so it renders
above the overlay; ensure the overlay remains pointer-events-none while the
heading retains normal pointer behavior.
---
Nitpick comments:
In `@apps/site/src/app/`(prisma-with)/react/page.tsx:
- Line 22: The H1 element in apps/site/src/app/(prisma-with)/react/page.tsx uses
framework-specific utility classes ("text-4xl sm:text-5xl md:text-6xl
stretch-display ...") which makes the example non-portable; update the <h1>
markup (and the similar element at the second occurrence referenced) to use
neutral markup or generic class names (e.g., plain <h1> with no framework
utilities or a single generic class like "heading") so the example is
framework-agnostic and copy/paste friendly, ensuring the visual intent is
preserved without relying on project-specific utility classes.
In `@apps/site/src/app/pricing/pricing-hero-plans.tsx`:
- Around line 40-42: The JSX uses two ambiguous class tokens "hero" and
"content" on the section and inner div which appear to be no-ops; either remove
these class names from the section and div in the PricingHeroPlans JSX if they
are unused, or add clear definitions for .hero and .content in the global
stylesheet (or Tailwind config/partials) so they provide consistent layout
hooks; update the component markup (the <section> with class "hero ..." and the
inner div with class "content ...") accordingly and ensure no visual regressions
by verifying the layout after removing or defining them.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5535fbcb-69f8-48da-a6fc-87ffedc15638
📒 Files selected for processing (31)
apps/site/src/app/(index)/page.tsxapps/site/src/app/(prisma-with)/nextjs/page.tsxapps/site/src/app/(prisma-with)/react/page.tsxapps/site/src/app/about/page.tsxapps/site/src/app/careers/page.tsxapps/site/src/app/changelog/[...slug]/page.tsxapps/site/src/app/changelog/page.tsxapps/site/src/app/client/page.tsxapps/site/src/app/community/page.tsxapps/site/src/app/ecosystem/page.tsxapps/site/src/app/enterprise/page.tsxapps/site/src/app/event-code-of-conduct/page.tsxapps/site/src/app/events/page.tsxapps/site/src/app/migrate/page.tsxapps/site/src/app/newsletter/page.tsxapps/site/src/app/orm/page.tsxapps/site/src/app/oss-friends/page.tsxapps/site/src/app/partners/page.tsxapps/site/src/app/partners/tos/page.tsxapps/site/src/app/postgres/page.tsxapps/site/src/app/pricing/pricing-hero-plans.tsxapps/site/src/app/privacy/page.tsxapps/site/src/app/showcase/page.tsxapps/site/src/app/sla/page.tsxapps/site/src/app/stack/page.tsxapps/site/src/app/startups/page.tsxapps/site/src/app/studio/page.tsxapps/site/src/app/support-policy/page.tsxapps/site/src/app/support/page.tsxapps/site/src/app/terms/page.tsxapps/site/src/app/typedsql/page.tsx
Keep the support hero title above its gradient overlay and make the React code examples portable while removing unused pricing hero class hooks. Made-with: Cursor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/site/src/app/pricing/pricing-hero-plans.tsx`:
- Around line 40-42: The classes z-1 and z-2 used in the section (the gradient
div and the content wrapper) are not part of Tailwind's default z-index scale,
so add them to your Tailwind config's theme.extend.zIndex (define keys "1" =>
"1" and "2" => "2") so Tailwind generates z-1 and z-2; then rebuild so the
overlay (z-1) stays behind the content wrapper (z-2).
In `@apps/site/src/app/support/page.tsx`:
- Around line 40-41: The heading uses undefined Tailwind utilities (`z-2`,
`max-w-224`) so stacking and width constraints don't apply; replace `z-2` with a
standard z utility (e.g., `z-10`) and swap `max-w-224` for a defined max-width
utility (e.g., `max-w-4xl` or `max-w-5xl`) on the h1, and ensure the gradient
overlay uses a lower z (e.g., `z-0` or `z-10` vs `z-20`) so the heading (h1)
sits above the overlay; search for other occurrences of `z-1`, `z-2`, `z-100`,
`max-w-224`, `max-w-300`, `max-w-120` and replace them with standard Tailwind
utilities or add corresponding entries to tailwind.config.ts if custom scales
are intentionally required.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9c48a441-23ae-46ae-a934-39fe5698a96d
📒 Files selected for processing (2)
apps/site/src/app/pricing/pricing-hero-plans.tsxapps/site/src/app/support/page.tsx
1 participant
Summary by CodeRabbit
Release Notes