diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx index 32b3a36..a110d7b 100644 --- a/frontend/src/components/Channels.tsx +++ b/frontend/src/components/Channels.tsx @@ -664,8 +664,20 @@ function TagsCell({ }) { const { t } = useTranslation(); const [open, setOpen] = useState(false); + // 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 ref = useRef(null); + const btnRef = useRef(null); useDismiss(open, () => setOpen(false), ref); + const toggle = () => { + if (!open) { + const r = btnRef.current?.getBoundingClientRect(); + const est = Math.min(userTags.length * 30 + 12, 264); // matches the max-height cap below + setOpenUp(!!r && r.bottom + est > window.innerHeight - 8 && r.top - est > 8); + } + setOpen((o) => !o); + }; if (userTags.length === 0) return null; // Show only the tags actually attached to this channel; the “+” opens a per-channel // picker to attach/detach (kept the convenient "kirakás" without listing every tag @@ -684,7 +696,8 @@ function TagsCell({ ))} {open && ( -
+
{userTags.map((tg) => { const on = c.tag_ids.includes(tg.id); return (