improvement(scroll): fade every capped list's clipped edges

The sweep's own three (the thread, the Plex collections filter, the tag manager)
plus the seven the spec missed — the playlist picker, the row tag menu, the Plex
playlist/collection dialogs, the player's track menu, the video description and
the table's multi-select filter. Same idiom throughout: a height-capped list that
silently clipped its content now says so, and hides its scrollbar like the rail
and the panels already do.

The table's option list is its own module-level component because it owns a hook:
FilterPopover is redeclared per DataTable render, so React remounts it.

frontend/src/components/AddToPlaylist.tsx

@@ -5,6 +5,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, ListPlus, Plus, Youtube } from "lucide-react";
 import { api, type Playlist } from "../lib/api";
 import { useDismiss } from "../lib/useDismiss";
+import { useScrollFade } from "../lib/useScrollFade";
 
 // A small popover (portaled to body, so the feed grid can't clip it) for toggling a
 // video's membership in the user's playlists, with inline "new playlist" creation.
@@ -17,6 +18,7 @@ export default function AddToPlaylist({
 }) {
   const { t } = useTranslation();
   const qc = useQueryClient();
+  const fade = useScrollFade();
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
@@ -134,7 +136,7 @@ export default function AddToPlaylist({
             <div className="text-xs text-muted px-1.5 pb-1.5">
               {t("playlists.addToPlaylist")}
             </div>
-            <div className="max-h-56 overflow-y-auto">
+            <div ref={fade.ref} style={fade.style} className="max-h-56 overflow-y-auto no-scrollbar">
               {lists.length === 0 && !membership.isLoading && (
                 <div className="text-xs text-muted px-1.5 py-2">
                   {t("playlists.noneYet")}

frontend/src/components/Channels.tsx

@@ -19,6 +19,7 @@ import { api, type ManagedChannel, type Tag } from "../lib/api";
 import { notifyYouTubeActionError } from "../lib/youtubeErrors";
 import { accountKey, LS } from "../lib/storage";
 import { useDismiss } from "../lib/useDismiss";
+import { useScrollFade } from "../lib/useScrollFade";
 import { formatEta, formatTotalHours, relativeTime } from "../lib/format";
 import { subsColumn } from "./channelColumns";
 import { notify } from "../lib/notifications";
@@ -684,6 +685,7 @@ function TagsCell({
   // Open the picker upward when there isn't room below (rows near the viewport bottom would
   // otherwise clip it against the scroll container), as long as there's room above.
   const [openUp, setOpenUp] = useState(false);
+  const fade = useScrollFade();
   const ref = useRef<HTMLDivElement | null>(null);
   const btnRef = useRef<HTMLButtonElement | null>(null);
   useDismiss(open, () => setOpen(false), ref);
@@ -723,7 +725,9 @@ function TagsCell({
       </button>
       {open && (
         <div
-          className={`glass-menu absolute left-0 z-30 w-44 max-h-[264px] overflow-y-auto rounded-xl p-1.5 animate-[popIn_0.16s_ease] ${
+          ref={fade.ref}
+          style={fade.style}
+          className={`glass-menu absolute left-0 z-30 w-44 max-h-[264px] overflow-y-auto no-scrollbar rounded-xl p-1.5 animate-[popIn_0.16s_ease] ${
             openUp ? "bottom-full mb-1" : "top-full mt-1"
           }`}
         >

frontend/src/components/ChatThread.tsx

@@ -4,6 +4,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Send } from "lucide-react";
 import { api, HttpError, type Message, type MessageUser } from "../lib/api";
 import { useLiveQuery } from "../lib/useLiveQuery";
+import { useScrollFade } from "../lib/useScrollFade";
 import { relativeTime } from "../lib/format";
 import { notify } from "../lib/notifications";
 import { partnerPub, POLL_MS, useKeyState } from "../lib/messaging";
@@ -28,6 +29,7 @@ export default function ChatThread({
   const [draft, setDraft] = useState("");
   const [plain, setPlain] = useState<Record<number, string>>({});
   const bottomRef = useRef<HTMLDivElement>(null);
+  const fade = useScrollFade();
   const ready = useKeyState() === "ready";
   const needsKey = !isSystem && !ready;
 
@@ -132,7 +134,11 @@ export default function ChatThread({
 
   return (
     <>
-      <div className="flex-1 overflow-y-auto p-3 flex flex-col gap-2">
+      <div
+        ref={fade.ref}
+        style={fade.style}
+        className="flex-1 overflow-y-auto no-scrollbar p-3 flex flex-col gap-2"
+      >
         {items.length === 0 ? (
           <div className="m-auto text-sm text-muted">{t("messages.threadEmpty")}</div>
         ) : (

frontend/src/components/DataTable.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ListFilter, X } from "lucide-react";
 import { useDismiss } from "../lib/useDismiss";
+import { useScrollFade } from "../lib/useScrollFade";
 
 // A reusable, client-side data table: per-column sort + filter (in the header) + pagination,
 // with its sort/filter/page state optionally persisted to localStorage so a reload (F5) keeps
@@ -9,6 +10,22 @@ import { useDismiss } from "../lib/useDismiss";
 // other modules (e.g. the playlist manager) can reuse it. Below `md` it falls back to a card
 // list built from the same column definitions.
 
+// The multi-select filter's option list, capped and scrollable. Its own component (module level,
+// not nested in DataTable) because it owns a hook: FilterPopover is redeclared on every DataTable
+// render, so React remounts it — state parked in there would churn.
+function FilterOptionList({ children }: { children: ReactNode }) {
+  const fade = useScrollFade();
+  return (
+    <div
+      ref={fade.ref}
+      style={fade.style}
+      className="flex flex-col gap-0.5 max-h-60 overflow-y-auto no-scrollbar"
+    >
+      {children}
+    </div>
+  );
+}
+
 type ColumnFilter<T> =
   | { kind: "text"; get: (row: T) => string }
   | { kind: "select"; options: { value: string; label: string }[]; test: (row: T, value: string) => boolean }
@@ -218,7 +235,7 @@ export default function DataTable<T>({
           </div>
         )}
         {f.kind === "multi" && (
-          <div className="flex flex-col gap-0.5 max-h-60 overflow-y-auto">
+          <FilterOptionList>
             {f.options.length === 0 && (
               <span className="text-xs text-muted px-2 py-1">{t("datatable.noOptions")}</span>
             )}
@@ -249,7 +266,7 @@ export default function DataTable<T>({
                 </button>
               );
             })}
-          </div>
+          </FilterOptionList>
         )}
         {isActive(val) && (
           <button

frontend/src/components/PlayerModal.tsx

@@ -10,6 +10,7 @@ import { api, type Video } from "../lib/api";
 import { channelYouTubeUrl, formatDate, formatDuration, formatViews, relativeTime } from "../lib/format";
 import { renderDescription } from "../lib/descriptionLinks";
 import { useBackToClose } from "../lib/history";
+import { useScrollFade } from "../lib/useScrollFade";
 
 // Experiment (branch experiment/inline-player): play the video in-app via the
 // YouTube IFrame Player API (not a bare embed) so we can read playback position
@@ -73,6 +74,7 @@ export default function PlayerModal({
 }) {
   const { t, i18n } = useTranslation();
   const qc = useQueryClient();
+  const descFade = useScrollFade();
   // Browser/mouse Back closes the player instead of leaving the page.
   useBackToClose(onClose);
   // Freeze the launch queue: the player steps through the SAME filtered + sorted list it was
@@ -775,7 +777,11 @@ export default function PlayerModal({
                   {detail.isLoading ? (
                     <div className="text-sm text-muted">{t("player.loading")}</div>
                   ) : detail.data?.description ? (
-                    <div className="text-sm whitespace-pre-wrap break-words max-h-64 overflow-y-auto leading-relaxed">
+                    <div
+                      ref={descFade.ref}
+                      style={descFade.style}
+                      className="text-sm whitespace-pre-wrap break-words max-h-64 overflow-y-auto no-scrollbar leading-relaxed"
+                    >
                       {renderDescription(detail.data.description, {
                         currentId: currentVideoId,
                         onSeek: seekTo,

frontend/src/components/PlexCollectionEditor.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, Plus } from "lucide-react";
 import { api } from "../lib/api";
+import { useScrollFade } from "../lib/useScrollFade";
 import Modal from "./Modal";
 import { useConfirm } from "./ConfirmProvider";
 
@@ -26,6 +27,8 @@ export default function PlexCollectionEditor({
   const { t } = useTranslation();
   const qc = useQueryClient();
   const confirm = useConfirm();
+  const editableFade = useScrollFade();
+  const othersFade = useScrollFade();
   const [members, setMembers] = useState<Set<string>>(() => new Set(memberOf));
   const [q, setQ] = useState("");
   const [newName, setNewName] = useState("");
@@ -146,7 +149,11 @@ export default function PlexCollectionEditor({
       )}
 
       {/* Editable collections with in/out toggle */}
-      <div className="max-h-80 space-y-1 overflow-y-auto">
+      <div
+        ref={editableFade.ref}
+        style={editableFade.style}
+        className="max-h-80 space-y-1 overflow-y-auto no-scrollbar"
+      >
         {listQ.isLoading ? (
           <p className="py-4 text-center text-sm text-muted">{t("plex.loading")}</p>
         ) : shown.length === 0 ? (
@@ -197,7 +204,11 @@ export default function PlexCollectionEditor({
           <summary className="cursor-pointer text-xs text-muted hover:text-fg">
             {t("plex.collEditor.others", { count: eligible.length })}
           </summary>
-          <div className="mt-2 max-h-40 space-y-1 overflow-y-auto">
+          <div
+            ref={othersFade.ref}
+            style={othersFade.style}
+            className="mt-2 max-h-40 space-y-1 overflow-y-auto no-scrollbar"
+          >
             {eligible.map((c) => (
               <div key={c.id} className="glass-card flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm">
                 <span className="min-w-0 flex-1 truncate">{c.title}</span>

frontend/src/components/PlexPlayer.tsx

@@ -36,6 +36,7 @@ import { api, type PlexMarker } from "../lib/api";
 import { formatDuration } from "../lib/format";
 import { LS, useAccountPersistedObject } from "../lib/storage";
 import { useDismiss } from "../lib/useDismiss";
+import { useScrollFade } from "../lib/useScrollFade";
 import { useBackToClose } from "../lib/history";
 
 // The rich info overlay (poster/cast/ratings) reuses the same component as the card's info page.
@@ -245,13 +246,24 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
   const menuOpenRef = useRef(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const menuTriggerRef = useRef<HTMLButtonElement>(null);
-  const tracksRef = useRef<HTMLDivElement>(null);
+  const tracksRef = useRef<HTMLDivElement | null>(null);
   const tracksTriggerRef = useRef<HTMLButtonElement>(null);
   audioRef.current = audioOrd;
   menuOpenRef.current = menuOpen || tracksOpen; // keep the control bar up while either menu is open
   // Each menu stays open until a click/Escape OUTSIDE it (so sliders can be dragged freely).
   useDismiss(menuOpen, () => setMenuOpen(false), [menuRef, menuTriggerRef]);
   useDismiss(tracksOpen, () => setTracksOpen(false), [tracksRef, tracksTriggerRef]);
+  // The tracks menu is both dismiss-tracked and edge-faded, so its two refs are merged here.
+  // Must be stable: an inline arrow would detach (null) and re-attach the node on every render,
+  // and the fade's node-state ref would re-render in response — a loop. `fade.ref` is a setState.
+  const tracksFade = useScrollFade();
+  const setTracksNode = useCallback(
+    (node: HTMLElement | null) => {
+      tracksRef.current = node as HTMLDivElement | null;
+      tracksFade.ref(node);
+    },
+    [tracksFade.ref]
+  );
   // Keyboard-shortcut cheat sheet (toggled with "h") + a live wall clock for the top bar.
   const [helpOpen, setHelpOpen] = useState(false);
   const helpOpenRef = useRef(false);
@@ -1222,10 +1234,11 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                 </button>
                 {tracksOpen && (
                   <div
-                    ref={tracksRef}
+                    ref={setTracksNode}
+                    style={tracksFade.style}
                     onClick={(e) => e.stopPropagation()}
                     onWheel={(e) => e.stopPropagation()}
-                    className="glass-menu absolute bottom-full right-0 mb-2 w-56 max-h-[60vh] overflow-auto rounded-xl p-2 text-sm text-white shadow-2xl"
+                    className="glass-menu absolute bottom-full right-0 mb-2 w-56 max-h-[60vh] overflow-auto no-scrollbar rounded-xl p-2 text-sm text-white shadow-2xl"
                   >
                     {detail.audio_streams.length > 1 && (
                       <>

frontend/src/components/PlexPlaylistAdd.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Check, Minus, Plus } from "lucide-react";
 import { api, type PlexPlaylist } from "../lib/api";
+import { useScrollFade } from "../lib/useScrollFade";
 import Modal from "./Modal";
 
 // What we're adding: a single leaf (movie/episode) or a whole group (a season or an entire show, as a
@@ -16,6 +17,7 @@ export type PlexAddTarget =
 // an in/out (or partial) state and a field to create a new one seeded with the target.
 export default function PlexPlaylistAdd({ target, onClose }: { target: PlexAddTarget; onClose: () => void }) {
   const { t } = useTranslation();
+  const fade = useScrollFade();
   const qc = useQueryClient();
   const [newName, setNewName] = useState("");
   const [busy, setBusy] = useState(false);
@@ -101,7 +103,7 @@ export default function PlexPlaylistAdd({ target, onClose }: { target: PlexAddTa
         </button>
       </div>
 
-      <div className="max-h-80 space-y-1 overflow-y-auto">
+      <div ref={fade.ref} style={fade.style} className="max-h-80 space-y-1 overflow-y-auto no-scrollbar">
         {listQ.isLoading ? (
           <p className="py-4 text-center text-sm text-muted">{t("plex.loading")}</p>
         ) : playlists.length === 0 ? (

frontend/src/components/PlexSidebar.tsx

@@ -5,6 +5,7 @@ import { Layers, ListMusic, Plus, SlidersHorizontal, X } from "lucide-react";
 import { api, EMPTY_PLEX_FILTERS, plexFilterCount, type PlexFilters } from "../lib/api";
 import { defaultLayout, type PanelLayout } from "../lib/panelLayout";
 import { useDebounced } from "../lib/useDebounced";
+import { useScrollFade } from "../lib/useScrollFade";
 import SidePanel from "./SidePanel";
 import PanelGroups, { type PanelItem } from "./PanelGroups";
 
@@ -56,6 +57,7 @@ export default function PlexSidebar({
   onToggleCollapse,
 }: Props) {
   const { t } = useTranslation();
+  const collFade = useScrollFade();
   const playlistsQ = useQuery({ queryKey: ["plex-playlists"], queryFn: () => api.plexPlaylists() });
   const [newPlaylist, setNewPlaylist] = useState("");
   const [editing, setEditing] = useState(false);
@@ -258,7 +260,11 @@ export default function PlexSidebar({
             placeholder={t("plex.filter.collectionSearch")}
             className="mb-1.5 w-full rounded-lg border border-border bg-card px-2 py-1 text-sm focus:border-accent focus:outline-none"
           />
-          <div className="flex max-h-56 flex-col gap-0.5 overflow-y-auto">
+          <div
+            ref={collFade.ref}
+            style={collFade.style}
+            className="flex max-h-56 flex-col gap-0.5 overflow-y-auto no-scrollbar"
+          >
             {collections.map((c) => (
               <button
                 key={c.id}

frontend/src/components/TagManager.tsx

@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Plus, Trash2 } from "lucide-react";
 import { api, type Tag } from "../lib/api";
 import { notify } from "../lib/notifications";
+import { useScrollFade } from "../lib/useScrollFade";
 import Modal from "./Modal";
 import { useConfirm } from "./ConfirmProvider";
 
@@ -28,6 +29,7 @@ function TagRow({
   const [name, setName] = useState(tag.name);
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState({ left: 0, top: 0 });
+  const popFade = useScrollFade();
   const countRef = useRef<HTMLSpanElement | null>(null);
   const closeTimer = useRef<number | undefined>(undefined);
   const commit = () => {
@@ -77,10 +79,11 @@ function TagRow({
       {open &&
         createPortal(
           <div
+            ref={popFade.ref}
             onMouseEnter={openPop}
             onMouseLeave={closeSoon}
-            style={{ position: "fixed", left: pos.left, top: pos.top, zIndex: 60 }}
-            className="glass-menu w-56 max-h-72 overflow-y-auto rounded-xl p-1.5 animate-[popIn_0.16s_ease]"
+            style={{ position: "fixed", left: pos.left, top: pos.top, zIndex: 60, ...popFade.style }}
+            className="glass-menu w-56 max-h-72 overflow-y-auto no-scrollbar rounded-xl p-1.5 animate-[popIn_0.16s_ease]"
           >
             <div className="text-[11px] uppercase tracking-wide text-muted px-2 py-1">
               {t("tagManager.onChannels")}
@@ -111,6 +114,7 @@ export default function TagManager({
   const { t } = useTranslation();
   const qc = useQueryClient();
   const confirm = useConfirm();
+  const listFade = useScrollFade();
   const [newName, setNewName] = useState("");
   const tagsQuery = useQuery({ queryKey: ["tags"], queryFn: api.tags });
   const channelsQuery = useQuery({ queryKey: ["channels"], queryFn: api.channels });
@@ -157,7 +161,11 @@ export default function TagManager({
           <p className="text-sm text-muted">{t("tagManager.empty")}</p>
         ) : (
           // Cap at ~8 rows tall, then scroll — the list can grow long.
-          <div className="flex flex-col gap-2 max-h-[22rem] overflow-y-auto pr-1">
+          <div
+            ref={listFade.ref}
+            style={listFade.style}
+            className="flex flex-col gap-2 max-h-[22rem] overflow-y-auto no-scrollbar pr-1"
+          >
             {userTags.map((tag) => (
               <TagRow
                 key={tag.id}