feat(billing): pricing feature rows wrap + explicit ✗ not-included marker

[PierreBrisorgueil]

What

Presentational refactor of BillingPricingFeatureSectionComponent (generic devkit pricing card section), for pricing cards that render a full comparable feature list (all features per plan, included ✓ / not-included ✗).

• Wrap long labels. Feature rows switch from v-list / v-list-item / v-list-item-title to a d-flex row + a plain <span>. v-list-item-title forces white-space: nowrap + ellipsis, which truncated substantive descriptions (e.g. "Stacks on top of subscription quota" → "… q…"). A plain span wraps naturally, so the :deep(.v-list-item-title) scoped-CSS hack that patched this is removed.
• Explicit not-included marker. enabled: false rows now render a fa-solid fa-xmark (✗) with dimmed text instead of a dimmed check — so excluded features read clearly as "not in this plan" in a full comparable list (icon carries the affordance, not opacity alone).
• Iconless headline rows. highlight: true rows render bold primary text with no leading icon (unchanged intent, cleaner markup).
• Scoped CSS dropped in favour of Vuetify utility classes.

Invariant

Presentation-only — no change to which features/props a plan declares, no change to resolvedHeading / introText / inheritsFrom priority logic. Backward-compatible: sections without enabled render exactly as before (check icon, no dimming).

Tests

Unit tests updated to assert the new DOM (xmark path, iconless bold highlight rows, wrapping span). Full suite green (2437), lint clean.

Note for reviewers

Section top spacing moves from a scoped 1.25rem to mt-3 (0.75rem) — deliberate, since a full comparable list stacks more sections per card. Flagged for visual eyeball; trivially bumpable if it reads cramped downstream.

Summary by CodeRabbit

• Refactor

  • Updated the billing pricing feature list to use a simpler row-based layout and cleaner utility styling.
  • Adjusted the heading and feature rows for more consistent spacing, wrapping, and icon presentation.

• Bug Fixes

  • Improved the display of enabled, disabled, and highlighted features with clearer icons and text emphasis.
  • Tooltips continue to appear alongside feature labels where available.

[coderabbitai]

Warning

Review limit reached

@PierreBrisorgueil, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 29 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6d6381a5-50ea-452f-87ca-21f981c92650

📥 Commits

Reviewing files that changed from the base of the PR and between 6e3f850 and 2f54706.

📒 Files selected for processing (2)

• src/modules/billing/components/billing.pricingFeatureSection.component.vue
• src/modules/billing/tests/billing.pricingFeatureSection.component.unit.tests.js

Walkthrough

The BillingPricingFeatureSectionComponent template is refactored from v-list/v-list-item markup to a flex-row layout with a standalone icon and label span, changing disabled/highlight styling and icon selection logic, and removing scoped CSS. Corresponding unit tests are updated to match the new DOM structure.

Changes

Pricing Feature Section Refactor

Layer / File(s)	Summary
Flex-row template refactor src/modules/billing/components/billing.pricingFeatureSection.component.vue	Template restructured from v-list/v-list-item to a flex row with standalone v-icon and span; icon logic shows xmark when disabled, check/item.icon otherwise; scoped CSS removed in favor of utility classes.
Updated unit tests for new markup src/modules/billing/tests/billing.pricingFeatureSection.component.unit.tests.js	Tests updated to check absence of h4 for null titles, validate bold/primary iconless highlighted rows, and confirm fa-xmark plus text-medium-emphasis dimming for disabled items versus default enabled rendering.

Estimated code review effort: 2 (Simple) | ~12 minutes

Possibly related issues

• ✨ Explicit not-included affordance for disabled pricing feature items #4383: Requests the explicit "not included" disabled-item affordance implemented here in the component and its tests.

Possibly related PRs

• pierreb-devkit/Vue#4102: Both PRs rework the same component's title/heading and per-item icon/disabled/highlight/tooltip markup and its tests.
• pierreb-devkit/Vue#4123: Both PRs touch the :deep(.v-list-item-title) truncation styling on the same component, with opposing changes.
• pierreb-devkit/Vue#4382: Both PRs modify the same component's icon/feature row rendering logic.

Suggested labels: Feat, billing

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is detailed, but it misses most required template sections such as Summary, Scope, Validation, and Guardrails.	Reformat it to the repo template and add Summary, Scope, Validation, Guardrails, and any issue links or risk details.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: wrapping feature rows and showing an explicit not-included xmark.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/billing-pricing-section-xmark-wrap

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.56%. Comparing base (ff0ed6d) to head (2f54706).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4390   +/-   ##
=======================================
  Coverage   99.56%   99.56%           
=======================================
  Files          35       35           
  Lines        1390     1390           
  Branches      435      435           
=======================================
  Hits         1384     1384           
  Misses          6        6           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/modules/billing/components/billing.pricingFeatureSection.component.vue`:
- Around line 59-68: The tooltip activator in
billing.pricingFeatureSection.component.vue is rendered via the v-icon inside
the v-tooltip activator slot, but it is not keyboard-focusable. Update the
tooltip trigger in that component so the icon can receive focus or is replaced
with a button-like activator, and ensure the activator props from v-tooltip are
preserved so keyboard users can open the hint without a mouse.
- Around line 44-58: The included/excluded state in the pricing feature row is
only shown by the icon, which is decorative and not announced to assistive tech.
Update the feature row in the billing pricing section component by adding a
screen-reader-only text label (or equivalent accessible label) on the
row/container near the existing v-icon and item.text rendering, and keep the
icon itself purely visual. Use the existing item.enabled, item.highlight, and
v-icon markup to locate the right place, and avoid relying on an aria-label on
v-icon alone.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2d1542ca-d8a4-4722-b374-dbc55a670f3f

📥 Commits

Reviewing files that changed from the base of the PR and between ff0ed6d and 6e3f850.

📒 Files selected for processing (2)

• src/modules/billing/components/billing.pricingFeatureSection.component.vue
• src/modules/billing/tests/billing.pricingFeatureSection.component.unit.tests.js