feat(design): the three 375 rows (E28 S3f3)

- Download row: answers to its own width (container query); below 40rem
  it stacks: picture beside a two-line title, the meta line across the
  row (one line, never wraps: zoomed on the iPad its pieces broke apart),
  then the source link and the actions on one wrapping line. The paste
  field takes a line of its own when the buttons would squeeze it.
- YT playlist row: below 42rem the length rides on the picture and the
  title runs two lines over the channel.
- Channels tag row: the suggestions take a line of their own below
  40rem (the chip lane was 0 px and the row's menu off the screen).
- Pager: on a phone the arrows drop their words (names kept), and the
  size label stays one line.
- Lint: a class split where the interpolation is the variant itself
  (${NARROW}:w-24) is refused too; it had shipped with no CSS.

frontend/src/components/downloadRow.tsx

@@ -65,6 +65,14 @@ export function StatusPill({ job }: { job: DownloadJob }) {
   );
 }
 
+// The row answers to its OWN width (a container query), not the window's: the same list sits in a
+// phone, a split-screen tablet and a desktop column. Below 40rem the actions no longer leave the title
+// column room for the meta line, so the row stacks (E28 S3f3, the owner's pick A): the picture beside a
+// two-line title and the channel; the meta line across the whole row; then the source link and the
+// actions on one wrapping line.
+const THUMB_BOX =
+  "w-28 @max-[40rem]/dlrow:w-24 aspect-video shrink-0 rounded-lg overflow-hidden bg-surface border border-border";
+
 function Thumb({ job }: { job: DownloadJob }) {
   // Prefer OUR self-hosted poster: it's always present on disk, never expires, and is same-origin, so
   // a source-CDN signature expiry (Facebook's fbcdn URLs expire within days) or an ad-blocker/Shields
@@ -91,13 +99,13 @@ function Thumb({ job }: { job: DownloadJob }) {
   // archive, not playable media. Show a neutral file glyph instead of an (always-empty) thumbnail.
   if (job.asset?.media_kind === "file") {
     return (
-      <div className="w-28 aspect-video shrink-0 rounded-lg overflow-hidden bg-surface border border-border flex items-center justify-center text-muted">
+      <div className={`${THUMB_BOX} flex items-center justify-center text-muted`}>
         <File className="w-8 h-8" aria-hidden="true" />
       </div>
     );
   }
   return (
-    <div className="w-28 aspect-video shrink-0 rounded-lg overflow-hidden bg-surface border border-border">
+    <div className={THUMB_BOX}>
       {src ? (
         <img
           src={src}
@@ -168,7 +176,7 @@ const nativeMenu = { onContextMenu: (e: React.MouseEvent) => e.stopPropagation()
 function SourceRef({ url }: { url: string }) {
   const { t } = useTranslation();
   return (
-    <div className="flex items-center gap-1 mt-1 text-sm text-muted min-w-0">
+    <div className="flex items-center gap-1 text-sm text-muted min-w-0">
       <Link2 className="w-3.5 h-3.5 shrink-0" />
       <a
         href={url}
@@ -230,57 +238,88 @@ export function DownloadRow({
     <div
       {...(navIndex !== undefined && navItemAttrs(navIndex, jobTitle(job)))}
       {...rowProps}
-      className={`${SURFACE.card} group flex gap-3 p-2.5 glass-hover transition`}
+      className={`${SURFACE.card} @container/dlrow group p-2.5 glass-hover transition`}
     >
-      <Thumb job={job} />
-      <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-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
+        className={`grid grid-cols-[auto_minmax(0,1fr)_auto] gap-x-3 gap-y-1 [grid-template-areas:'thumb_head_act''thumb_meta_act''thumb_src_act''thumb_prog_act'] @max-[40rem]/dlrow:grid-cols-[auto_minmax(0,1fr)] @max-[40rem]/dlrow:[grid-template-areas:'thumb_head''meta_meta''foot_foot''prog_prog']`}
+      >
+        <div className="[grid-area:thumb]">
+          <Thumb job={job} />
         </div>
-        <ChannelLine job={job} />
-        <div className="flex items-center gap-2 mt-1 text-sm">
+        <div className="[grid-area:head] min-w-0">
+          <div
+            className={`font-medium leading-snug break-words line-clamp-1 @max-[40rem]/dlrow:line-clamp-2`}
+          >
+            {job.job_kind === "edit" && (
+              <span className="mr-1.5 inline-flex items-center gap-1 px-1.5 py-0.5 align-middle rounded-sm text-2xs font-semibold uppercase tracking-wide bg-accent/15 text-accent">
+                <Scissors className="w-3 h-3" /> {t("downloads.clipBadge")}
+              </span>
+            )}
+            {jobTitle(job)}
+          </div>
+          <ChannelLine job={job} />
+        </div>
+        {/* The meta line never wraps (the owner, 2026-09-27: on the iPad its "18.9 / MB" pieces broke
+            into a jumble). One line, cut at its end, so the least telling part (the age) goes first. */}
+        <div data-dl-meta className="[grid-area:meta] min-w-0 truncate text-sm">
           <StatusPill job={job} />
           {job.asset?.container ? (
             // Concrete container (mp4 / m4a / webm …) — reads as the file format, and its audio-vs-video
             // extension is the video/audio distinction the running-only phase pill can't show at rest.
-            <span className="text-muted uppercase">· {job.asset.container}</span>
+            <span className="text-muted uppercase"> · {job.asset.container}</span>
           ) : null}
           {job.asset?.size_bytes ? (
-            <span className="text-muted">· {formatBytes(job.asset.size_bytes)}</span>
+            <span className="text-muted"> · {formatBytes(job.asset.size_bytes)}</span>
           ) : null}
           {job.asset?.duration_s ? (
-            <span className="text-muted">· {formatDuration(job.asset.duration_s)}</span>
+            <span className="text-muted"> · {formatDuration(job.asset.duration_s)}</span>
           ) : null}
           {job.status === "done" && job.created_at ? (
-            <span
-              className="text-muted inline-flex items-center gap-1"
-              title={formatDateTime(job.created_at)}
-            >
-              · <CalendarClock className="w-3.5 h-3.5" /> {relativeTime(job.created_at)}
+            <span className="text-muted" title={formatDateTime(job.created_at)}>
+              {" · "}
+              <CalendarClock className="inline w-3.5 h-3.5 align-[-0.15em]" />{" "}
+              {relativeTime(job.created_at)}
             </span>
           ) : null}
           {job.status === "error" ? (
-            <Pressable
-              onClick={() => onShowError?.(job)}
-              className="text-danger inline-flex min-h-6 items-center gap-1 truncate touch-target"
-              title={t("downloads.errors.fail.title")}
-            >
-              · {t(failCopyKeys(job, "short"))}
-              <span className="text-muted underline">{t("downloads.errors.fail.detailsLink")}</span>
-            </Pressable>
+            <>
+              {" "}
+              <Pressable
+                onClick={() => onShowError?.(job)}
+                className="text-danger inline-block leading-5 min-h-5 touch-target pointer-coarse:leading-(--touch-target)"
+                title={t("downloads.errors.fail.title")}
+              >
+                · {t(failCopyKeys(job, "short"))}{" "}
+                <span className="text-muted underline">
+                  {t("downloads.errors.fail.detailsLink")}
+                </span>
+              </Pressable>
+            </>
           ) : null}
         </div>
-        {job.source_url && <SourceRef url={job.source_url} />}
-        {job.extra_links?.map((url) => (
-          <SourceRef key={url} url={url} />
-        ))}
+        {/* Wide, this wrapper is `contents`: the source and the actions are grid items of their own
+            (src under the meta, act down the right). Stacked, it is ONE wrapping line: the link and
+            the actions side by side while they fit, the actions under the link only when they don't
+            (at 375). On touch each is a 44px box, so separate lines stacked 44px gaps (the owner,
+            2026-09-27: "what are those huge empty parts?"). */}
+        <div className="contents @max-[40rem]/dlrow:[grid-area:foot] @max-[40rem]/dlrow:flex @max-[40rem]/dlrow:flex-wrap @max-[40rem]/dlrow:items-center @max-[40rem]/dlrow:gap-x-2">
+          {(!!job.source_url || !!job.extra_links?.length) && (
+            <div className="[grid-area:src] min-w-0 @max-[40rem]/dlrow:min-w-32 @max-[40rem]/dlrow:flex-1">
+              {job.source_url && <SourceRef url={job.source_url} />}
+              {job.extra_links?.map((url) => (
+                <SourceRef key={url} url={url} />
+              ))}
+            </div>
+          )}
+          {/* The row's visible actions — its primary one and the save link — then its "…": the md
+              rung here (the row stands alone), the sm rung in the modals, one IconBtn for both. */}
+          <div className="[grid-area:act] flex items-start gap-1 shrink-0 @max-[40rem]/dlrow:ml-auto">
+            {children}
+            {more}
+          </div>
+        </div>
         {running && (
-          <div className="mt-1.5">
+          <div className="[grid-area:prog] mt-0.5">
             {job.phase && !DOWNLOAD_PHASES.includes(job.phase) ? (
               // ffmpeg post-steps aren't byte-progress — show an indeterminate pulse, no %.
               <div className="h-1.5 rounded-full bg-surface overflow-hidden">
@@ -304,13 +343,6 @@ export function DownloadRow({
           </div>
         )}
       </div>
-      {/* The row's visible actions — its primary one and the save link — then its "…": the md rung
-          here (the row stands alone), the sm rung in the modals, one IconBtn for both. `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">
-        {children}
-        {more}
-      </div>
     </div>
   );
 }