ainur/metube
1
0
Fork 0
mirror of https://github.com/alexta69/metube.git synced 2026-09-21 13:35:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: align the row action icons across both download tables

Browse Source 
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
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/app.html
+2 -2
View File
@@ -754,7 +754,7 @@
<td>{{ download.value.speed | speed }}</td> <td>{{ download.value.speed | speed }}</td>
<td>{{ download.value.eta | eta }}</td> <td>{{ download.value.eta | eta }}</td>
<td> <td>
<div class="d-flex"> <div class="d-flex justify-content-end">
@if (download.value.status === 'pending' || download.value.status === 'scheduled') { @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> <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>
<td> <td>
<div class="d-flex"> <div class="d-flex justify-content-end">
@if (entry[1].status === 'error') { @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> <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>
} }