Skip to content

fix(PricingTable): align header elements vertically#6111

Open
maximepvrt wants to merge 2 commits intonuxt:v4from
maximepvrt:fix-pricingtable
Open

fix(PricingTable): align header elements vertically#6111
maximepvrt wants to merge 2 commits intonuxt:v4from
maximepvrt:fix-pricingtable

Conversation

@maximepvrt
Copy link
Contributor

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

Capture d’écran 2026-02-26 à 23 44 41

After

Capture d’écran 2026-02-26 à 23 45 18

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

@github-actions github-actions bot added the v4 #4488 label Feb 26, 2026
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 26, 2026

📝 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

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

Copy link
Contributor

@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: 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
Copy link

pkg-pr-new bot commented Feb 27, 2026

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

commit: ac1ed17

@benjamincanac benjamincanac changed the title fix(pricing-table): add wrapper to fix header vertical alignment fix(PricingTable): align header elements vertically Feb 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant