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/components/PlexPlaylistView.menu.dom.test.tsx

@@ -265,6 +265,9 @@ describe("PlexPlaylistView · the keyboard", () => {
     expect(document.activeElement).toBe(rowOf("The Show"));
     pressKey("j");
     expect(document.activeElement).toBe(rowOf("Ep e1"));
+    // Both sit flush in the show's clipping card: an outside ring was cut away (index.css).
+    expect(rowOf("The Show").hasAttribute("data-nav-inset")).toBe(true);
+    expect(rowOf("Ep e1").hasAttribute("data-nav-inset")).toBe(true);
     pressKey("k");
     const bulk = vi.spyOn(api, "plexPlaylistRemoveBulk").mockResolvedValue({} as never);
     pressKey("Delete");