fix(design): the keyboard ring of a flush row stays visible (E28)

A list item's ring sat 2 px outside it. On a table row it ran under the
sticky head and past the table's sides; on a Plex playlist show header, flush
in its clipping card, it was cut away and the focus was invisible. A table row
(by its tag), a log line and the Plex show header and episode rows now ring
inside themselves, the show header with its card's corners.

The sticky header's fade-below was drawn at rest, over the first row's top
16 px, hiding the ring's top edge: it now fades in with the first 1rem of
scroll (a scroll-driven animation; no fade where unsupported).

frontend/src/lib/listNav.ts

@@ -50,13 +50,20 @@ const REVEAL_FRAMES = 10;
 /** Spread onto an item's ROOT element. `name` is what a screen reader calls the item while the keyboard
  *  is on it (its title) — pass it where the element Enter opens wraps the whole card (a Plex poster:
  *  badges, year, rating and summary run together), shows a caption that is not the item's name, or
- *  holds no text at all (deep-review E11 round 3). */
+ *  holds no text at all (deep-review E11 round 3).
+ *
+ *  `inset` draws the keyboard ring INSIDE the item. The ring sits 2 px outside by default, which a
+ *  card with a gap round it has room for; an item flush against its neighbours (a log line) or against
+ *  the edge of a clipping card (a Plex playlist show header) does not: the ring ran past the list, or
+ *  was clipped away entirely. A table row needs no flag: index.css insets every `tr` by its tag. */
 export const navItemAttrs = (
   index: number,
   name?: string | null,
-): { "data-nav-index": number; "data-nav-name"?: string } => ({
+  { inset = false }: { inset?: boolean } = {},
+): { "data-nav-index": number; "data-nav-name"?: string; "data-nav-inset"?: "" } => ({
   [INDEX]: index,
   ...(name ? { "data-nav-name": name } : null),
+  ...(inset ? { "data-nav-inset": "" } : null),
 });
 
 const indexOf = (item: Element): number => Number(item.getAttribute(INDEX));