From 401615369afd0560511645c29bcceec6b1a30f6e Mon Sep 17 00:00:00 2001 From: Pierre Brisorgueil Date: Fri, 10 Apr 2026 21:19:19 +0200 Subject: [PATCH 1/2] feat(home): render icon on the right of title when alignment='right' 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 --- .../utils/home.content.component.vue | 10 +++++- .../home.content.component.unit.tests.js | 31 +++++++++++++++++++ 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/src/modules/home/components/utils/home.content.component.vue b/src/modules/home/components/utils/home.content.component.vue index 6b3986e58..498f63222 100644 --- a/src/modules/home/components/utils/home.content.component.vue +++ b/src/modules/home/components/utils/home.content.component.vue @@ -40,7 +40,7 @@
-
+
{{ setup.icon }} { expect(actions.classes()).toContain('justify-end'); }); + it('reverses icon+title row order (flex-row-reverse) when right-aligned so the icon hugs the right edge', () => { + const wrapper = mount(HomeContentComponent, { + props: { setup: { ...baseSetup }, alignment: 'right' }, + global: globalOpts(vuetify), + }); + const title = wrapper.findComponent({ name: 'VCardTitle' }); + const iconRow = title.find('div.d-flex'); + expect(iconRow.classes()).toContain('flex-row-reverse'); + // must not leak onto v-card-actions (would flip button content order) + const actions = wrapper.findComponent({ name: 'VCardActions' }); + expect(actions.classes()).not.toContain('flex-row-reverse'); + }); + + it('does NOT apply flex-row-reverse to the icon+title row when left-aligned', () => { + const wrapper = mount(HomeContentComponent, { + props: { setup: { ...baseSetup }, alignment: 'left' }, + global: globalOpts(vuetify), + }); + const iconRow = wrapper.findComponent({ name: 'VCardTitle' }).find('div.d-flex'); + expect(iconRow.classes()).not.toContain('flex-row-reverse'); + }); + + it('does NOT apply flex-row-reverse to the icon+title row when center-aligned', () => { + const wrapper = mount(HomeContentComponent, { + props: { setup: { ...baseSetup }, alignment: 'center' }, + global: globalOpts(vuetify), + }); + const iconRow = wrapper.findComponent({ name: 'VCardTitle' }).find('div.d-flex'); + expect(iconRow.classes()).not.toContain('flex-row-reverse'); + }); + it('applies text-center and justify-center classes in the DOM when center-aligned', () => { const wrapper = mount(HomeContentComponent, { props: { setup: { ...baseSetup }, alignment: 'center' }, From fecbe12690fd4773419447ea9e0b220ec84733b8 Mon Sep 17 00:00:00 2001 From: Pierre Brisorgueil Date: Fri, 10 Apr 2026 21:27:55 +0200 Subject: [PATCH 2/2] fix(home): use justify-start under flex-row-reverse so icon hugs right 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. --- .../utils/home.content.component.vue | 26 ++++++++++++++----- .../home.content.component.unit.tests.js | 9 +++++-- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/modules/home/components/utils/home.content.component.vue b/src/modules/home/components/utils/home.content.component.vue index 498f63222..92a27f746 100644 --- a/src/modules/home/components/utils/home.content.component.vue +++ b/src/modules/home/components/utils/home.content.component.vue @@ -40,7 +40,7 @@
-
+
{{ setup.icon }} { }); const title = wrapper.findComponent({ name: 'VCardTitle' }); expect(title.classes()).toContain('text-right'); - const iconRow = title.find('div.d-flex'); - expect(iconRow.classes()).toContain('justify-end'); const text = wrapper.findComponent({ name: 'VCardText' }); expect(text.classes()).toContain('text-right'); const actions = wrapper.findComponent({ name: 'VCardActions' }); @@ -104,7 +102,12 @@ describe('HomeContentComponent', () => { }); const title = wrapper.findComponent({ name: 'VCardTitle' }); const iconRow = title.find('div.d-flex'); + // flex-row-reverse visually swaps icon + title expect(iconRow.classes()).toContain('flex-row-reverse'); + // under flex-row-reverse, justify-start = right edge (main axis is inverted) + // so we MUST use justify-start (not justify-end) to hug the right edge + expect(iconRow.classes()).toContain('justify-start'); + expect(iconRow.classes()).not.toContain('justify-end'); // must not leak onto v-card-actions (would flip button content order) const actions = wrapper.findComponent({ name: 'VCardActions' }); expect(actions.classes()).not.toContain('flex-row-reverse'); @@ -117,6 +120,7 @@ describe('HomeContentComponent', () => { }); const iconRow = wrapper.findComponent({ name: 'VCardTitle' }).find('div.d-flex'); expect(iconRow.classes()).not.toContain('flex-row-reverse'); + expect(iconRow.classes()).toContain('justify-start'); }); it('does NOT apply flex-row-reverse to the icon+title row when center-aligned', () => { @@ -126,6 +130,7 @@ describe('HomeContentComponent', () => { }); const iconRow = wrapper.findComponent({ name: 'VCardTitle' }).find('div.d-flex'); expect(iconRow.classes()).not.toContain('flex-row-reverse'); + expect(iconRow.classes()).toContain('justify-center'); }); it('applies text-center and justify-center classes in the DOM when center-aligned', () => {