From ec01524527fe8ca708d3f207775f91d833bbd4f0 Mon Sep 17 00:00:00 2001
From: Alex Shnitman <alexta69@gmail.com>
Date: Sun, 20 Sep 2026 10:01:37 +0300
Subject: [PATCH] fix: align the row action icons across both download tables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 ui/src/app/app.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/app.html b/ui/src/app/app.html
index a31db81..6bb6fcc 100644
--- a/ui/src/app/app.html
+++ b/ui/src/app/app.html
@@ -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>
                   }