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.
This commit is contained in:
@@ -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"
|
||||
}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user