fix(accounts): align action column with table edge

Let the final account action column absorb the table's remaining width instead of translating a fixed-width cell by a guessed offset. This keeps the Action header and row menus centered together at the visible right side across window widths and removes the ineffective fixed transform. Add focused regression coverage for the flexible final grid track.
This commit is contained in:
Sucukdeluxe
2026-08-15 02:38:02 +02:00
parent 2d62dd69d0
commit c54c45f10c
3 changed files with 3 additions and 6 deletions
@@ -65,7 +65,7 @@ export function resizeAccountTableColumn(
}
export function getAccountTableGridTemplate(widths: AccountTableColumnWidths): string {
return `42px ${ACCOUNT_TABLE_COLUMN_IDS.map((id) => `${widths[id]}px`).join(" ")} 64px`;
return `42px ${ACCOUNT_TABLE_COLUMN_IDS.map((id) => `${widths[id]}px`).join(" ")} minmax(64px, 1fr)`;
}
export function getAccountTableMinWidth(widths: AccountTableColumnWidths): number {
-4
View File
@@ -674,10 +674,6 @@
place-items: center;
}
.settings-account-column-actions {
transform: translateX(20px);
}
.settings-account-hoster {
display: flex;
align-items: center;
+2 -1
View File
@@ -724,7 +724,7 @@ describe("account workspace", () => {
expect(html).toContain('aria-label="Status Spaltenbreite ändern"');
expect(html).toMatch(/class="settings-account-column-actions" role="columnheader">Aktion<\/span>/);
expect(settingsCss).not.toMatch(/\.settings-account-column-actions\s*{[^}]*padding-right:/s);
expect(settingsCss).toMatch(/\.settings-account-column-actions\s*{[^}]*transform:\s*translateX\(20px\)/s);
expect(settingsCss).not.toMatch(/\.settings-account-column-actions\s*{[^}]*transform:/s);
});
it("offers separate checks for active accounts and every configured account", () => {
@@ -766,6 +766,7 @@ describe("account workspace", () => {
expect(widened.status).toBeGreaterThan(initial.status);
expect(narrowed.status).toBeGreaterThanOrEqual(120);
expect(api.getAccountTableGridTemplate?.(widened)).toContain(`${widened.status}px`);
expect(api.getAccountTableGridTemplate?.(widened)).toMatch(/minmax\(64px, 1fr\)$/);
});
it("keeps row selection, enable toggles, edit and context actions separate", () => {