fix(ui): a sticky table header turns the scroller's top fade off itself; DataTable renders one layout

- "A page with a sticky ColumnHead must declare fadeTop: false" lived in
  prose: a registry flag on three pages plus an App special case for the
  Channels card layout, and the next table page would have re-acquired the
  fade-on-the-header defect with every lane green. ColumnHead now registers
  itself with the enclosing PageScroller (ui/stickyTop) while mounted; the
  registry flag, the App branch and the prop plumbing are gone. Measured on
  localdev: the top mask is 0px under Channels' and Audit's headers, 20px on
  Home and the Feed.
- ui/DataTable mounted its table AND its card list at every width, one
  hidden by CSS: double DOM and render cost, duplicate ids, two keyboard
  copies of every row. It now mounts the one the `md` media query calls for
  (lib/useMediaQuery); the keyboard test asserts one layout at each width.
- The Plex module's content width went px → rem with the rest of the page.

frontend/src/components/ui/DataTable.keyboard.dom.test.tsx

@@ -1,9 +1,9 @@
 // @vitest-environment jsdom
 //
 // DataTable's `keyboardNav` (E11 S4c): the rows are a keyboard list — `j`/`k` walk them and Enter
-// clicks the element a column marks `data-nav-open`. The table renders its rows twice (a table and,
-// below `md`, a card list); only the copy on screen may be walked, or `j` past the last row would carry
-// on into the hidden one.
+// clicks the element a column marks `data-nav-open`. It used to render its rows twice (a table and,
+// below `md`, a card list, one hidden by CSS), so `j` past the last row could carry on into the hidden
+// copy. Now it mounts exactly one layout, chosen by the `md` media query.
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { act, cleanup, render } from "@testing-library/react";
 import DataTable, { type Column } from "./DataTable";
@@ -13,7 +13,10 @@ vi.mock("react-i18next", async (importOriginal) => {
   return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
 });
 
-afterEach(cleanup);
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
 
 type Row = { id: string };
 const rows: Row[] = [{ id: "a" }, { id: "b" }];
@@ -45,9 +48,15 @@ function press(key: string) {
   });
 }
 
-/** What a display:none copy answers in a browser; jsdom lays nothing out, so every copy is "visible". */
-const offScreen = (el: Element | null) =>
-  Object.defineProperty(el!, "checkVisibility", { value: () => false, configurable: true });
+/** The viewport `md` question, answered as asked (jsdom has no matchMedia of its own). */
+function viewport(wide: boolean) {
+  vi.stubGlobal("matchMedia", (query: string) => ({
+    matches: query === "(min-width: 48rem)" ? wide : false,
+    media: query,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+  }));
+}
 
 /** The focused row: which copy (TR / DIV) and which row. */
 const focused = () => {
@@ -58,26 +67,38 @@ const focused = () => {
 describe("DataTable · keyboardNav", () => {
   it("walks the table's rows, stops at the last one, and opens a row on Enter", () => {
     const opened: string[] = [];
-    const { container } = table((id) => opened.push(id));
-    offScreen(container.querySelector(".md\\:hidden"));
+    viewport(true);
+    table((id) => opened.push(id));
     press("j");
     expect(focused()).toBe("TR a");
     press("j");
     expect(focused()).toBe("TR b");
-    // The hidden card copy follows the table in the DOM — it must not be the next stop.
+    // The last row is the last stop — there is no second copy after it to walk into.
     press("j");
     expect(focused()).toBe("TR b");
     press("Enter");
     expect(opened).toEqual(["b"]);
   });
 
-  it("walks the card copy when that is the one on screen", () => {
-    const { container } = table(() => {});
-    offScreen(container.querySelector("tbody"));
+  it("walks the card list when the viewport is narrow", () => {
+    viewport(false);
+    table(() => {});
     press("j");
     expect(focused()).toBe("DIV a");
   });
 
+  it("mounts one layout, never both", () => {
+    viewport(true);
+    const wide = table(() => {});
+    expect(wide.container.querySelectorAll("[data-nav-index]")).toHaveLength(2);
+    expect(wide.container.querySelector("table")).not.toBeNull();
+    cleanup();
+    viewport(false);
+    const narrow = table(() => {});
+    expect(narrow.container.querySelectorAll("[data-nav-index]")).toHaveLength(2);
+    expect(narrow.container.querySelector("table")).toBeNull();
+  });
+
   it("leaves the rows out of the keyboard without keyboardNav", () => {
     const { container } = table(() => {}, false);
     expect(container.querySelector("[data-nav-index]")).toBeNull();