Skip to content

fix: misaligned layout in PricingSection by adjusting description height (minor issue)#39

Merged
karthikmudunuri merged 1 commit intokarthikmudunuri:main-V-3.0from
Yeom-JinHo:fix/gradient-pricing
Sep 10, 2025
Merged

fix: misaligned layout in PricingSection by adjusting description height (minor issue)#39
karthikmudunuri merged 1 commit intokarthikmudunuri:main-V-3.0from
Yeom-JinHo:fix/gradient-pricing

Conversation

@Yeom-JinHo
Copy link
Copy Markdown

@Yeom-JinHo Yeom-JinHo commented Sep 8, 2025

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

  • The only change is updating the utility class from h-12 → h-32.
  • This ensures all pricing cards have consistent header spacing, keeping price and CTA buttons aligned across the grid.

Screenshots

ASIS TOBE
스크린샷 2025-09-08 오후 10 44 17 스크린샷 2025-09-08 오후 10 44 05

Summary by CodeRabbit

  • Style
    • Increased vertical space for the pricing description in the Pricing demo, using a taller fixed height to better accommodate longer text.
    • Improves readability and prevents cramped or clipped descriptions in the Pricing section.
    • Visual-only update; no changes to content, behavior, or interactions.
    • Enhances layout consistency across varying description lengths.

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Sep 8, 2025

@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.

@netlify
Copy link
Copy Markdown

netlify bot commented Sep 8, 2025

Deploy Preview for uieldora ready!

Name Link
🔨 Latest commit dbbaddb
🔍 Latest deploy log https://app.netlify.com/projects/uieldora/deploys/68beddd7b66921000889e701
😎 Deploy Preview https://deploy-preview-39--uieldora.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Sep 8, 2025

Walkthrough

Updated 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

Cohort / File(s) Summary
Styling/Layout adjustment
registry/demos/pricing-demo.tsx
Increased description paragraph height class from h-12 to h-32; no functional changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

I nibbled the CSS, hop-hop, what a view!
Stretching the price words, from twelve to thirty-two.
More room for carrots—uh, copy—to flow,
A taller tale in the pricing’s glow.
Wiggle my whiskers: layout anew! 🥕✨

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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-32 aligns 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-32 so 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">
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5b740b0 and dbbaddb.

📒 Files selected for processing (1)
  • registry/demos/pricing-demo.tsx (1 hunks)

@karthikmudunuri karthikmudunuri merged commit 684500d into karthikmudunuri:main-V-3.0 Sep 10, 2025
5 of 7 checks passed
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.

2 participants