Skip to content

fix: Pricing features icon alignment#266

Merged
haydenbleasel merged 3 commits intoshadcnblocks:mainfrom
alexcarpenter:alexcarpenter/pricing-icon-alignment
Sep 30, 2025
Merged

fix: Pricing features icon alignment#266
haydenbleasel merged 3 commits intoshadcnblocks:mainfrom
alexcarpenter:alexcarpenter/pricing-icon-alignment

Conversation

@alexcarpenter
Copy link
Copy Markdown
Contributor

@alexcarpenter alexcarpenter commented Sep 29, 2025 •
edited by coderabbitai bot
Loading

Description

Fixes icon shrinking and alignment within pricing block when the feature text wraps to two lines.

Related Issues

Closes #<issue_number>

Checklist

  • My code follows the code style of this project.
  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have updated the documentation, if necessary.
  • I have added tests that prove my fix is effective or my feature works.
  • New and existing tests pass locally with my changes.

Screenshots (if applicable)

BEFORE AFTER
Screenshot 2025-09-29 at 4 10 49 PM Screenshot 2025-09-29 at 4 09 26 PM

Additional Notes

Summary by CodeRabbit

  • Style

    • Updated pricing example feature rows to remove vertical centering, improving spacing and legibility.
    • Adjusted check icon sizing to maintain consistent alignment and prevent stretching across layouts and browsers.

  • Documentation

    • Refreshed the pricing example visuals for clearer feature lists and more consistent presentation across devices.

@vercel
Copy link
Copy Markdown

vercel bot commented Sep 29, 2025

@alexcarpenter is attempting to deploy a commit to the Haste Ventures Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Sep 29, 2025 •
edited
Loading

📝 Walkthrough

Walkthrough

Updated UI classes in pricing example: adjusted feature row flex alignment and BadgeCheck icon sizing within CardContent.

Changes

Cohort / File(s) Summary of Changes
Docs pricing example UI tweaks
apps/docs/examples/pricing.tsx		 Removed vertical centering in feature rows by changing "flex items-center gap-2" to "flex gap-2". Adjusted BadgeCheck icon sizing from "h-4 w-4" to "w-4 flex-none h-[1lh]" to alter layout behavior.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title Check ✅ Passed The title "fix: Pricing features icon alignment" clearly and accurately describes the main change in this pull request. The changeset modifies the CSS classes for the BadgeCheck icon and its container in the pricing component to fix alignment issues when feature text wraps to multiple lines. The title is concise, specific, and directly relates to the primary objective of the changes without being overly broad or vague.
Description Check ✅ Passed The pull request description follows the template structure well and includes all required sections. The Description section clearly explains what the PR fixes, the Checklist is present with all items (though unchecked), and Screenshots are provided showing before/after comparisons which is appropriate for a UI-related change. The only minor issue is that the Related Issues section contains a placeholder "#<issue_number>" rather than an actual issue number, but this is a non-critical detail and the PR is otherwise complete and informative.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 04e347c and c0748db.

📒 Files selected for processing (1)
  • apps/docs/examples/pricing.tsx (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Vercel Agent Review
🔇 Additional comments (2)
apps/docs/examples/pricing.tsx (2)

143-143: Good fix for multi-line text alignment.

Removing items-center allows the icon to align at the top of the feature row rather than vertically centering between wrapped lines, which is the correct behavior for this use case.

146-146: Clever use of line-height unit for icon sizing.

The combination of flex-none (prevents shrinking), w-4 (fixed width), and h-[1lh] (height matches line-height) ensures the icon maintains proper proportions and alignment when text wraps. The lh unit is a nice touch that ties the icon size to the text's line-height.

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
🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

  • Public repositories are always opted into early access features.
  • You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

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

@haydenbleasel haydenbleasel merged commit d43a8f1 into shadcnblocks:main Sep 30, 2025
2 of 3 checks passed
@haydenbleasel
Copy link
Copy Markdown
Contributor

haydenbleasel commented Sep 30, 2025

@alexcarpenter appreciate you bruh 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter @haydenbleasel