feat(home): add grid layout option to features component

[PierreBrisorgueil]

Summary

• Add layout: 'grid' config option to the features component as an alternative to the default carousel
• Grid renders all cards in a responsive v-row/v-col layout with configurable cols (2, 3, 4, or 6) or auto-calculated from item count
• Carousel remains the default behavior when layout is unset or set to 'carousel'

Changes

• Conditional template: grid (v-if="isGrid") vs carousel (v-if="!isGrid")
• isGrid and gridColSize computed properties
• Dynamic island hidden in grid mode (no pagination needed)
• Updated component docblock with new config options

Closes #3854

Test plan

• Verify carousel still works as default (no layout key)
• Set layout: 'grid' and confirm cards render in a responsive grid
• Test cols: 2, cols: 3, cols: 4, cols: 6 overrides
• Test auto column calculation (1-2 items → 2 cols, 3 → 3 cols, 4+ → 4 cols)
• Verify responsive behavior on mobile (all cards stack to cols="12")
• Lint, unit tests, and build pass

Summary by CodeRabbit

• New Features
  • Added grid layout mode for feature cards, complementing the default carousel display
  • Grid mode includes configurable column sizing to accommodate different layout preferences

[coderabbitai]

Warning

Rate limit exceeded

@PierreBrisorgueil has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 19 minutes and 10 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 19 minutes and 10 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 648dbb0d-d65d-476d-85be-6bdd16689099

📥 Commits

Reviewing files that changed from the base of the PR and between 92afe0f and 44e596f.

📒 Files selected for processing (2)

• src/modules/home/components/home.features.component.vue
• src/modules/home/tests/home.features.component.unit.tests.js

Walkthrough

The features component now supports both carousel and grid layout modes. Added isGrid and gridColSize computed properties to switch rendering modes and determine grid column sizing. Template conditionally renders either grid or carousel based on the layout configuration. Dynamic island display is restricted to carousel mode only.

Changes

Cohort / File(s)	Summary
Layout Mode Support src/modules/home/components/home.features.component.vue	Added grid layout option alongside existing carousel mode. Introduced isGrid and gridColSize computed properties to handle mode switching and column sizing. Updated template to conditionally render either grid or carousel layout. Restricted dynamic island to carousel mode only.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat(home): add HomeCtaComponent for final CTA section #3843: Both PRs modify src/modules/home/components/home.features.component.vue, with one adding carousel/grid rendering and computed props while the other forwards an imgMode prop to the homeImgComponent.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a grid layout option to the features component.
Description check	✅ Passed	The description includes summary, changes, test plan, and linked issue, following the template's core sections, though some validation checkboxes and guardrails sections are missing.
Linked Issues check	✅ Passed	The code changes fully implement the requirements from #3854: grid layout option, configurable/auto-calculated columns, carousel as default, responsive grid rendering, and preserved card styling.
Out of Scope Changes check	✅ Passed	All changes are scoped to the features component template and computed properties to implement the grid layout feature; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/home-features-grid-layout-3854

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.23%. Comparing base (3a99e67) to head (44e596f).
⚠️ Report is 6 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3859   +/-   ##
=======================================
  Coverage   99.23%   99.23%           
=======================================
  Files          28       28           
  Lines         910      910           
  Branches      243      243           
=======================================
  Hits          903      903           
  Misses          7        7           

☔ View full report in Codecov by Sentry.
📢 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.

[Copilot]

Pull request overview

Adds a new layout: 'grid' option to the Home features/cards component so landing pages can render feature cards in a responsive grid instead of the default carousel.

Changes:

• Introduces conditional rendering for grid vs carousel layouts.
• Adds isGrid and gridColSize computed properties to drive grid behavior and column sizing.
• Disables the dynamic island pagination UI when grid layout is active.

[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/modules/home/components/home.features.component.vue`:
- Around line 140-146: The gridColSize() function can throw when
this.setup.content is undefined; update gridColSize to guard access to content
(e.g., compute const count = (this.setup?.content ?? []).length or use
(this.setup.content || []).length) and use that count for the subsequent
comparisons; ensure the initial check for this.setup.cols remains unchanged and
that the fallback behavior (count <=2 => 6, <=3 =>4, else 3) is preserved.

🪄 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: f99b2a95-29c8-41c2-af68-a73c4747195f

📥 Commits

Reviewing files that changed from the base of the PR and between 3a99e67 and 92afe0f.

📒 Files selected for processing (1)

• src/modules/home/components/home.features.component.vue