polish(datatable): fade rows under the sticky header, not the header itself

The rows now dissolve as they slide up under the sticky header (matching
the bottom fade), while the header stays crisp. A short gradient painted
by the header's ::after sits just below it and fades the rows — this
replaces the scroller's top mask-fade, which is off on these pages so it
can't touch the header. Barely visible at rest (it covers the first row's
top padding), clear once scrolling. Suite 15/15, tsc + knip clean.

frontend/src/components/DataTable.tsx

@@ -370,8 +370,10 @@ export default function DataTable<T>({
           {/* Sticky header row: the column headers stay put at the top of the page scroller while
               the rows scroll under them. `bg-bg` on each cell keeps rows from showing through; the
               border rides a pseudo-element (box-shadow) since a sticky <tr>'s own border scrolls
-              away with the collapsed table box in some browsers. */}
-          <thead className="sticky top-0 z-10">
+              away with the collapsed table box in some browsers. The `::after` paints a short
+              fade just BELOW the header so rows dissolve as they slide under it (the header itself
+              stays crisp — the page scroller's own top fade is off on these pages). */}
+          <thead className="sticky top-0 z-10 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-[linear-gradient(to_bottom,var(--bg),transparent)] after:content-['']">
             <tr className="text-muted [&>th]:shadow-[inset_0_-1px_0_var(--border)]">
               {columns.map((col) => {
                 const sorted_ = sort?.key === col.key;