fix(edit-content): position-based right-align for relationship last column

[oidacra]

What

Fixes the showFields column-alignment bug in the new Edit Content Relationship field table.

The table hardcoded right-alignment (text-right!) to the status column type, assuming status is always the last data column (flush against the + action column). When the showFields field variable reorders columns (e.g. Status, Locales instead of Locales, Status), the status chip was pushed to the right edge of a now-middle column and collided visually with the next column.

How

Right-alignment is now positional instead of type-based: it is bound to the last data column via the @for $last context ([class.text-right!]="$last") on every column cell, in both the header and body templates. Whichever column renders last hugs the action column, regardless of its type.

Uses the [class.foo!] conditional-important syntax already established in the codebase (e.g. [class.bg-white!] in the locales sidebar selector).

• The default layout (title, language, status) is visually unchanged — status is still last, so it still right-aligns.
• With showFields reordering, the last column right-aligns and the previously-misplaced text-right! on a mid-table status column is gone.

Scope

Template-only change. No TypeScript, SCSS, or store changes.

Acceptance criteria

• With showFields adding/reordering columns, the relationship field renders correctly — no misaligned chips
• Chips/tags continue to render as specified (locale tag, status badge)
• Default layout unchanged

Testing

• nx lint edit-content — passing (no new warnings)
• nx test edit-content --testPathPatterns=dot-relationship-field.component.spec — 12/12 passing
• Manually verified in the browser

Closes #36155

[claude]

Claude finished @oidacra's task in 57s —— View job

---

Code Review

Todos

• Read PR diff against origin/main
• Review full template for $last context correctness
• Check for regressions and edge cases
• Post review

---

Reviewed the single changed file. The approach is sound: $last is an @for contextual variable that remains in scope inside the nested @switch/@case blocks, so [class.text-right!]="$last" correctly targets whichever column renders last — regardless of showFields reordering. The frozen action column (+/×) sits outside the @for, so "last data column hugs the action column" holds in both header and body. Default layout (title, language, status) still right-aligns status since it stays last. ✅

New Issues

• 🟡 Medium: dot-relationship-field.component.html:130 — When the title column is the last data column (a possible showFields reorder), text-right! is applied to the <td>, but its content is an inner <div class="flex items-center gap-3">. text-align doesn't affect a flex container's item positioning, so the title content won't actually right-align in that case. Same applies to the header at line 29 (there the text is a direct child, so it would right-align — an inconsistency between header and body when title is last). This is an unlikely layout, so non-blocking, but worth confirming the intended behavior when a flex-content column ends up last. Fix this →

• 🟡 Medium: no test — The new behavior (last-column-driven alignment under showFields reordering) is the core fix, but the diff adds no spec asserting that the last rendered column receives text-right! when columns are reordered. Existing 12 tests pass but cover the default order. A small test rendering a reordered columns array and asserting the trailing cell has the class would lock in the fix against regression.

Everything else looks correct — no logic, security, or convention issues. The [class.foo!] conditional-important syntax matches existing codebase usage.
• oidacra/36155

[claude]

Claude finished @oidacra's task in 30s —— View job

---

Rollback-Safety Analysis

• Read docs/core/ROLLBACK_UNSAFE_CATEGORIES.md
• Diffed 57a25b26...a0c96289
• Checked diff against every unsafe category
• Applied label

Result: Safe to rollback ✅

The change is confined to a single Angular template file: core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html. It only adds/moves [class.text-right!]="$last" CSS class bindings on <th>/<td> cells to make right-alignment positional instead of type-based. No TypeScript, store, database migration, Elasticsearch mapping, or API contract changes are involved — it doesn't match any category in the rollback-unsafe reference (C-1…H-7, etc.).

Label AI: Safe To Rollback has been added to the PR.

[mergify]

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

• Queue this pull request