feat(home): render icon on the right of title when alignment='right'#3952
feat(home): render icon on the right of title when alignment='right'#3952PierreBrisorgueil wants to merge 2 commits intomasterfrom
Conversation
Add a dedicated titleRowReverseClass computed that applies flex-row-reverse only to the icon+title row (not v-card-actions) when computedAlignment === 'right', so the icon visually hugs the right edge alongside the title text. Refs #3951
|
Warning Rate limit exceeded
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 4 minutes and 11 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughThe PR adds a computed property to conditionally apply Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3952 +/- ##
=======================================
Coverage 99.46% 99.46%
=======================================
Files 29 29
Lines 940 940
Branches 252 252
=======================================
Hits 935 935
Misses 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Adjusts HomeContentComponent so that when alignment="right" the title icon is rendered on the right side of the title, matching the intended right-aligned layout introduced in #3947 and fixing #3951.
Changes:
- Add a computed
titleRowReverseClassand apply it to the icon+title flex row when right-aligned. - Add unit tests to validate
flex-row-reverseis applied only to the icon+title row for right alignment (and not for left/center, and not leaking to actions).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/modules/home/components/utils/home.content.component.vue | Applies a conditional class to reverse the icon+title row when computedAlignment === 'right'. |
| src/modules/home/tests/home.content.component.unit.tests.js | Adds tests for the new flex-row-reverse behavior and its non-application in other alignments/areas. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/utils/home.content.component.vue`:
- Line 43: The current template combines justifyClass with titleRowReverseClass
(used in the div showing setup.icon/setup.title), which causes conflicts (e.g.,
justify-end + flex-row-reverse) and misaligns the group; change the logic so the
icon/title row uses a dedicated computed class (e.g., titleRowJustifyClass) or
extend justifyClass to return a right-specific value when titleRowReverseClass
is true, and update the div(s) that use ['d-flex align-center ga-2 my-0',
justifyClass, titleRowReverseClass] (including the other similar instances that
use titleRowReverseClass) to use that dedicated class instead of combining
conflicting classes.
- Around line 153-160: The computed function titleRowReverseClass lacks a JSDoc
`@returns` tag; add a one-line JSDoc summary above titleRowReverseClass describing
what it does and include an `@returns` line that documents the returned string
(e.g., "returns {string} CSS class name or empty string") and mention that it
reads computedAlignment to decide the class; ensure the JSDoc follows the repo
rules (one-line description, `@param` for args if any, and `@returns` for non-void
return).
🪄 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: d922f3aa-e359-45d8-b137-e99f44fd366e
📒 Files selected for processing (2)
src/modules/home/components/utils/home.content.component.vuesrc/modules/home/tests/home.content.component.unit.tests.js
…t edge Addresses Copilot review on #3952: - Under `flex-row-reverse` the main axis is inverted, so `justify-end` aligns items at the LEFT edge. To actually hug the right edge when right-aligned, the reversed title row must use `justify-start`. - Replace the dual-class approach (`justifyClass` + `titleRowReverseClass`) with a single `titleRowClass` that returns `'justify-start flex-row-reverse'` when right-aligned, and falls back to `justifyClass` otherwise. - Extend JSDoc with explicit `@returns`, clarify flex-row-reverse only affects visual order (DOM/a11y order unchanged). - Update tests: assert `justify-start` (not `justify-end`) on the reversed title row, and explicitly assert justify classes on the left/center title rows too.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Summary
home.content.component.vuenow appliesflex-row-reverseto the icon+title flex row whencomputedAlignment === 'right', via a dedicatedtitleRowReverseClasscomputed. Visually the icon moves to the right of the title text, hugging the right edge.alignment='right'option, but the DOM order stayed[icon][title]. Only the whole flex block was pushed right viajustify-end, so the icon still rendered on the LEFT of the title. This fixes the visual to match reader expectations.Scope
homenonelowThe reversal is scoped to the icon+title row only —
v-card-actionsintentionally still usesjustifyClass(nottitleRowReverseClass) so the button icon layout is untouched.Validation
npm run lintnpm run test:unit(home.content.component: 12/12 — 3 new tests for flex-row-reverse behavior, positive + 2 negative)npm run buildGuardrails check
.env*,secrets/**, keys, tokens)Notes for reviewers
Summary by CodeRabbit
Bug Fixes
Tests