fix(ui): a card's Play clears its hover row at a large text size; Downloads links and the player description

At text size 1.3 a 242px feed thumbnail put the 63px Play 13px into the
hover row (the Play grows with the root font, the picture's height does
not). A picture narrower than 14rem centres the Play and the resume pair
above the row; the picture box is a size container for it.

The Downloads title and channel links were 21px tall inline boxes; they
stand on a 24px line now (B1). The player's description says a failed
load, with a retry, instead of 'No description' (both the side panel
and the popover).

frontend/src/components/downloadRow.dom.test.tsx

@@ -237,6 +237,27 @@ describe("DownloadRow · a link with no details yet", () => {
     expect(container.textContent).not.toContain("https://");
   });
 
+  // E31 S5 (measured at 21px on the Downloads page): every link in the row stands on a 24px line on
+  // a mouse (DESIGN B1), as the link line and the failure link already did.
+  it("gives the title link and the channel link a 24px line", () => {
+    const { container } = render(
+      <DownloadRow
+        job={{
+          ...bare,
+          display_uploader: "Someone",
+          display_uploader_url: "https://example.com/c",
+        }}
+      />,
+    );
+    const title = [...container.querySelectorAll("a")].find((a) => a.href === bare.source_url)!;
+    const channel = container.querySelector<HTMLAnchorElement>("a[href='https://example.com/c']")!;
+    // inline-block: an inline link's box is the font's height (21px) whatever its line height.
+    for (const a of [title, channel])
+      expect(a.className.split(/\s+/)).toEqual(
+        expect.arrayContaining(["inline-block", "leading-6"]),
+      );
+  });
+
   it("keeps the named row as it was: title text, and the link on its own line", () => {
     const named = { ...bare, display_name: "A clip" };
     const { container } = render(<DownloadRow job={named} />);