fix(datatable): the sticky header no longer shifts or fades on first scroll

The sticky <thead> jumped up ~8px and picked up the scroller's top fade
the moment you scrolled 1px — so it read as 'not fixed'. Two causes:
- the table sat under a pt-2 gap, so its natural position was 8px below
  the sticky top:0 it snapped to. Drop the top padding (the fixed band's
  controls row already gives the visual gap) → no shift.
- the page scroller's top edge fade turned on with the first scroll and
  masked the header's top. Add a fadeTop flag (PageShell → PageScroller →
  useScrollFade), off for the Channels + Audit pages whose scroll region
  starts with a sticky header. Feed/channel keep the top fade (it fades
  cards under the fixed toolbar, as intended).

Verified: header stays at a fixed offset with no fade change from scroll 0
through scrolled, on both the manager and the audit log. Suite 15/15.

frontend/src/lib/useScrollFade.ts

@@ -7,7 +7,10 @@ import { useEffect, useState, type CSSProperties } from "react";
 // to attach to the scroller and the mask `style` to spread onto it. Uses a node-state callback
 // ref (not useRef) so the effect (re)runs whenever the element attaches — e.g. a SidePanel that
 // mounts collapsed and only renders its scroll body once expanded still wires up correctly.
-export function useScrollFade(fadePx = 20): {
+// `fadeTop` gates the top edge only. Pass false when the scroller's top is a sticky element (a
+// table's sticky header): fading there would eat into the header instead of hinting at content, and
+// the header would visibly change as the fade turns on with the first scroll.
+export function useScrollFade(fadePx = 20, fadeTop = true): {
   ref: (node: HTMLElement | null) => void;
   style: CSSProperties;
 } {
@@ -53,7 +56,7 @@ export function useScrollFade(fadePx = 20): {
     };
   }, [el]);
 
-  const mask = `linear-gradient(to bottom, transparent, #000 ${fade.up ? fadePx : 0}px, #000 calc(100% - ${
+  const mask = `linear-gradient(to bottom, transparent, #000 ${fade.up && fadeTop ? fadePx : 0}px, #000 calc(100% - ${
     fade.down ? fadePx : 0
   }px), transparent)`;
   return { ref: setEl, style: { maskImage: mask, WebkitMaskImage: mask } };