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/mediaPicture.contract.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+
+import videoCard from "./VideoCard.tsx?raw";
+
+import {
+  MEDIA_HOVER_LAYER,
+  MEDIA_PICTURE_CONTAINER,
+  MEDIA_RESUME_LAYER,
+  mediaPictureBox,
+} from "./ui/mediaCardStyles";
+
+// E31 S5, measured: at text size 1.3 a 242px feed thumbnail put the 63px Play 13px into the 37px hover
+// row (the Play and the row grow with the root font, the picture's height does not). A narrow picture
+// (under 14rem, so the cut moves with the text size) centres what it carries above the row instead.
+describe("a media picture", () => {
+  it("is a size container, so what sits on it answers its width", () => {
+    expect(mediaPictureBox("wide")).toContain(MEDIA_PICTURE_CONTAINER);
+    expect(mediaPictureBox("poster")).toContain(MEDIA_PICTURE_CONTAINER);
+    // The video card draws its own box (it is not a mediaPictureBox).
+    expect(videoCard).toContain('clsx("relative min-h-0", MEDIA_PICTURE_CONTAINER, className)');
+  });
+
+  it.each([
+    ["the Play", MEDIA_HOVER_LAYER],
+    ["the Continue + Restart pair", MEDIA_RESUME_LAYER],
+  ])("leaves the hover row its band when narrow: %s", (_, layer) => {
+    expect(layer.split(" ")).toContain("@max-[14rem]/pic:pb-10");
+  });
+});