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/Playlists.dom.test.tsx

@@ -574,9 +574,27 @@ describe("Playlists · a narrow table", () => {
       el.classList.contains("hidden") && el.classList.contains("@2xl:table-cell");
     const heads = [...document.querySelectorAll("thead th")];
     const cells = [...document.querySelectorAll("tbody tr:first-child td")];
-    // Columns: grip, #, title, channel, length, "…".
-    expect(heads.map(narrowHidden)).toEqual([false, true, false, true, false, false]);
-    expect(cells.map(narrowHidden)).toEqual([false, true, false, true, false, false]);
+    // Columns: grip, #, title, channel, length, "…". Length went too (E28 S3f3, the owner's pick A).
+    expect(heads.map(narrowHidden)).toEqual([false, true, false, true, true, false]);
+    expect(cells.map(narrowHidden)).toEqual([false, true, false, true, true, false]);
+  });
+
+  it("carries the hidden length on the picture and the channel under a two-line title", async () => {
+    mount({ 1: [vid("A", 0)] });
+    const thumb = await screen.findByRole("button", { name: "card.play — Video A" });
+    const narrowOnly = (el: Element | null): boolean =>
+      !!el && (el.classList.contains("@2xl:hidden") || narrowOnly(el.parentElement));
+    // 3000 s = 50:00, drawn on the picture only while the Length column is hidden.
+    const badge =
+      [...thumb.querySelectorAll("span")].find((e) => e.textContent === "50:00") ?? null;
+    expect(narrowOnly(badge)).toBe(true);
+    const cell = thumb.closest("td")!;
+    const title = [...cell.querySelectorAll("span")].find((e) => e.textContent === "Video A")!;
+    expect(title.className).toContain("line-clamp-2");
+    expect(title.className).toContain("@2xl:line-clamp-1");
+    const channel =
+      [...cell.querySelectorAll("span")].find((e) => e.textContent === "Channel") ?? null;
+    expect(narrowOnly(channel)).toBe(true);
   });
 });