fix: align the row action icons across both download tables

The actions cell packs its icons left, but several are conditional: Start
in Downloading, and Retry / Download file / Share in Completed. A table
column takes one width — the widest row's — so every shorter row left its
slack on the right and slid its icons out of column.

Measured in the browser: with a mixed Completed list, the error row put
Delete at x=769 and the finished row put it at x=815. Delete is the
destructive control, and it moved depending on whether the row above
happened to have errored.

Right-aligning the group pins the always-present icons — Open source and
Delete — to a fixed column on every row, and lets the optional ones
extend leftward instead. It costs no layout: the column was already sized
to the widest row, so this only moves the slack from the right to the
left of the group.

The chapter-file sub-rows are deliberately left packing left. Their lone
download icon then sits under the parent row's own download icon, which
is the alignment that reads correctly there; right-aligning it would park
it under Delete instead.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Alex Shnitman
2026-09-20 10:01:37 +03:00
parent a6d81d4513
commit ec01524527
+2 -2
View File
@@ -754,7 +754,7 @@
<td>{{ download.value.speed | speed }}</td>
<td>{{ download.value.eta | eta }}</td>
<td>
<div class="d-flex">
<div class="d-flex justify-content-end">
@if (download.value.status === 'pending' || download.value.status === 'scheduled') {
<button type="button" class="btn btn-link" [attr.aria-label]="'Start download for ' + download.value.title" (click)="downloadItemByKey(download.key)"><fa-icon [icon]="faDownload" /></button>
}
@@ -881,7 +881,7 @@
}
</td>
<td>
<div class="d-flex">
<div class="d-flex justify-content-end">
@if (entry[1].status === 'error') {
<button type="button" class="btn btn-link" [attr.aria-label]="'Retry download for ' + entry[1].title" (click)="retryDownload(entry[0], entry[1])"><fa-icon [icon]="faRedoAlt" /></button>
}