From bb6cb6e33521d3396151acb00539dacbe7988f81 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 29 Aug 2026 05:29:19 +0200
Subject: [PATCH] style(downloads): bump library-row meta text + action buttons
 a step (E7 S1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enlarge every non-title text on the card (channel, status/format/size/date meta,
source-ref line, progress readout) one step (xs→sm) plus their inline icons, and
grow the row action buttons (padding + icon) via the actions wrapper so the shared
IconBtn stays smaller in the modals. Buttons keep the title's line — the wrapper is
shrink-0/no-wrap, so the text column shrinks instead.
---
 frontend/src/components/downloadRow.tsx | 29 +++++++++++++++----------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/downloadRow.tsx b/frontend/src/components/downloadRow.tsx
index 45a918f7..14b3dcca 100644
--- a/frontend/src/components/downloadRow.tsx
+++ b/frontend/src/components/downloadRow.tsx
@@ -43,12 +43,12 @@ export function StatusPill({ job }: { job: DownloadJob }) {
   // confused by the bar resetting between the separate video and audio streams.
   if (job.status === "running" && job.phase && PHASE_KEYS.includes(job.phase)) {
     return (
-      <span className="text-xs font-medium text-accent">{t(`downloads.phase.${job.phase}`)}</span>
+      <span className="text-sm font-medium text-accent">{t(`downloads.phase.${job.phase}`)}</span>
     );
   }
   const key = job.expired ? "expired" : job.status;
   return (
-    <span className={clsx("text-xs font-medium", STATUS_CLS[job.status] ?? "text-muted")}>
+    <span className={clsx("text-sm font-medium", STATUS_CLS[job.status] ?? "text-muted")}>
       {t(`downloads.status.${key}`)}
     </span>
   );
@@ -145,8 +145,8 @@ function SourceRef({ url }: { url: string }) {
     }
   };
   return (
-    <div className="flex items-center gap-1 mt-1 text-xs text-muted min-w-0">
-      <Link2 className="w-3 h-3 shrink-0" />
+    <div className="flex items-center gap-1 mt-1 text-sm text-muted min-w-0">
+      <Link2 className="w-3.5 h-3.5 shrink-0" />
       <a
         href={url}
         target="_blank"
@@ -162,7 +162,7 @@ function SourceRef({ url }: { url: string }) {
         title={t("downloads.source.copy")}
         className="shrink-0 p-0.5 rounded-sm hover:bg-surface hover:text-fg transition"
       >
-        <Copy className="w-3 h-3" />
+        <Copy className="w-3.5 h-3.5" />
       </button>
     </div>
   );
@@ -173,7 +173,7 @@ function ChannelLine({ job }: { job: DownloadJob }) {
   const { name, url } = jobChannel(job);
   if (url) {
     return (
-      <div className="text-xs mt-0.5 truncate">
+      <div className="text-sm mt-0.5 truncate">
         <a
           href={url}
           target="_blank"
@@ -186,7 +186,7 @@ function ChannelLine({ job }: { job: DownloadJob }) {
       </div>
     );
   }
-  return <div className="text-xs text-muted truncate mt-0.5">{name}</div>;
+  return <div className="text-sm text-muted truncate mt-0.5">{name}</div>;
 }
 
 export function DownloadRow({
@@ -206,14 +206,14 @@ export function DownloadRow({
       <div className="min-w-0 flex-1">
         <div className="font-medium leading-snug line-clamp-1 flex items-center gap-1.5">
           {job.job_kind === "edit" && (
-            <span className="inline-flex items-center gap-1 shrink-0 px-1.5 py-0.5 rounded-sm text-3xs font-semibold uppercase tracking-wide bg-accent/15 text-accent">
+            <span className="inline-flex items-center gap-1 shrink-0 px-1.5 py-0.5 rounded-sm text-2xs font-semibold uppercase tracking-wide bg-accent/15 text-accent">
               <Scissors className="w-3 h-3" /> {t("downloads.clipBadge")}
             </span>
           )}
           <span className="truncate">{jobTitle(job)}</span>
         </div>
         <ChannelLine job={job} />
-        <div className="flex items-center gap-2 mt-1 text-xs">
+        <div className="flex items-center gap-2 mt-1 text-sm">
           <StatusPill job={job} />
           {job.asset?.container ? (
             // Concrete container (mp4 / m4a / webm …) — reads as the file format, and its audio-vs-video
@@ -231,7 +231,7 @@ export function DownloadRow({
               className="text-muted inline-flex items-center gap-1"
               title={new Date(job.created_at).toLocaleString()}
             >
-              · <CalendarClock className="w-3 h-3" /> {relativeTime(job.created_at)}
+              · <CalendarClock className="w-3.5 h-3.5" /> {relativeTime(job.created_at)}
             </span>
           ) : null}
           {job.status === "error" ? (
@@ -264,7 +264,7 @@ export function DownloadRow({
                     style={{ width: `${job.progress}%` }}
                   />
                 </div>
-                <div className="text-2xs text-muted mt-0.5 flex gap-2">
+                <div className="text-xs text-muted mt-0.5 flex gap-2">
                   <span>{job.progress}%</span>
                   {job.speed_bps ? <span>{formatSpeed(job.speed_bps)}</span> : null}
                   {job.eta_s ? <span>{formatEta(job.eta_s)}</span> : null}
@@ -274,7 +274,12 @@ export function DownloadRow({
           </div>
         )}
       </div>
-      <div className="flex items-start gap-0.5 shrink-0">{children}</div>
+      {/* Row action buttons: grown a step here (bigger tap target + icon) without touching the shared
+          IconBtn — scoped so the same primitive stays smaller in the modals. `shrink-0` + no wrap keeps
+          them on the title's line; the text column shrinks instead. */}
+      <div className="flex items-start gap-1 shrink-0 [&_button]:p-2 [&_svg]:size-[18px]">
+        {children}
+      </div>
     </div>
   );
 }