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/Home.tsx

@@ -59,13 +59,14 @@ import { SURFACE } from "./ui/surfaces";
 import clsx from "clsx";
 import { IconButton } from "./ui/IconButton";
 import { MoreButton } from "./ui/MoreButton";
-import { HOVER_REVEAL, HOVER_YIELD } from "./ui/reveal";
+import { HOVER_YIELD } from "./ui/reveal";
 import { MediaResumeButtons } from "./MediaResumeButtons";
 import { MediaCard, MediaPlayGlyph } from "./ui/MediaCard";
 import {
   MEDIA_BAR,
   MEDIA_BADGE,
   MEDIA_HOVER_LAYER,
+  MEDIA_RESUME_LAYER,
   MEDIA_IMG,
   MEDIA_PICTURE,
   mediaPictureBox,
@@ -595,13 +596,7 @@ function Hero({
         {/* A started hero continues on a click, and offers the start as a card does (C5): the pair
             is a sibling over the picture, never inside its button. */}
         {started && (
-          <div
-            className={clsx(
-              HOVER_REVEAL,
-              "pointer-events-none absolute inset-0 z-base flex items-center justify-center gap-2 *:pointer-events-auto",
-              card.aspect === "poster" && "flex-col",
-            )}
-          >
+          <div className={clsx(MEDIA_RESUME_LAYER, card.aspect === "poster" && "flex-col")}>
             <MediaResumeButtons onContinue={() => onPlay(card)} onRestart={() => onPlay(card, 0)} />
           </div>
         )}