fix: misaligned layout in PricingSection by adjusting description height (minor issue)#39
Conversation
|
@Yeom-JinHo is attempting to deploy a commit to the Karthik Varma's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for uieldora ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughUpdated the PricingSection in registry/demos/pricing-demo.tsx to change a paragraph’s height class from h-12 to h-32, increasing the vertical space for the price description. No logic, data, or exports were modified. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
✨ Finishing Touches
🧪 Generate unit tests
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 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
registry/demos/pricing-demo.tsx (1)
132-134: Alignment fix works; consider min-height or clamping to avoid overflow/i18n issues.Using a fixed
h-32aligns cards but can clip or overlap if the description exceeds 8rem (longer copy, localization, or larger text sizes). Two low-risk tweaks:
- Prefer
min-h-32so typical cards align while longer text can expand instead of overflowing.- If the Tailwind line-clamp plugin is available, clamp to a consistent number of lines for predictable height without hard-coding pixels.
Option A (no plugin):
- <p className="h-32 text-sm leading-5 text-black/70 dark:text-white"> + <p className="min-h-32 text-sm leading-5 text-black/70 dark:text-white">Option B (with plugin):
- <p className="h-32 text-sm leading-5 text-black/70 dark:text-white"> + <p className="text-sm leading-5 text-black/70 dark:text-white line-clamp-3">
684500d
into
karthikmudunuri:main-V-3.0
Description
This PR fixes content squashing/misalignment in PricingSection cards by giving the description block a stable height so prices/CTAs align across all plans.
Changes
Screenshots
Summary by CodeRabbit