fix(PricingTable): align header elements vertically

[maximepvrt]

Added a tierWrapper to fix the vertical alignment of elements in the table headers, using an h-0 hack on the parent cell to force the wrapper to fill the entire available space.

Before

After

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PricingTable component's template was refactored to introduce a top-level tierWrapper container per tier and to flatten previously nested slot structure. Title, badge, description, price, discount, billing, and button areas were reorganized into distinct wrapper paths with dynamic slot names (e.g., ${tier.id}-title, ${tier.id}-badge, ${tier.id}-description, ${tier.id}-price, ${tier.id}-discount, ${tier.id}-button). Conditional rendering for badge, discount, billing, and button was preserved and adapted to the new wrappers. The theme file adds a tierWrapper slot class and updates tier and tierButton slot class strings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is related to the changeset, explaining the purpose of the tierWrapper addition and including before/after screenshots demonstrating the visual improvement.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'fix(PricingTable): align header elements vertically' accurately describes the main change—fixing vertical alignment of header elements in the pricing table component using a new tierWrapper structure.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/runtime/components/PricingTable.vue`:
- Around line 206-212: Indent the billing slot spans and their inner text by two
additional spaces to satisfy vue/html-indent: locate the elements with
data-slot="tierBillingPeriod" and data-slot="tierBillingCycle" (and their
bindings ui.tierBillingPeriod, ui.tierBillingCycle, tier.billingPeriod,
tier.billingCycle, uiProp?.tierBillingPeriod) and adjust their indentation so
both the <span> lines and their interpolated content are aligned with the parent
slot block (two spaces deeper than currently) to resolve the ESLint failure.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2438d45 and 326148e.

⛔ Files ignored due to path filters (2)

• test/components/__snapshots__/PricingTable-vue.spec.ts.snap is excluded by !**/*.snap
• test/components/__snapshots__/PricingTable.spec.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (2)

• src/runtime/components/PricingTable.vue
• src/theme/pricing-table.ts

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6111

commit: cd5ac4b

[maximepvrt]

@benjamincanac Do you plan to do a review soon ?

[benjamincanac]

So sorry for the delay! 😬 Looks good besides the dead justify-end! Hopefully it will not introduce a breaking change for people who customized it.

[maximepvrt]

@benjamincanac updated

I also pushed a quick fix for the tier wrapper. I swapped the h-0 to h-full and added a h-fit on the table itself. Turns out my old hack was Chrome-only and didn't work on Firefox (glad my recent move to Zen Browser caught that).
https://stackoverflow.com/a/73399942

before (firefox)

[benjamincanac]

@maximepvrt The justify-between breaks alignment now: