peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(channels): flip the row tag picker upward when it would clip below

Browse source 
The per-row tag '+' menu always opened downward (top-full) and clipped against the scroll
container for rows near the viewport bottom. Measure the button on open and flip it upward
(bottom-full) when there isn't room below but there is above; cap its height with an internal
scroll so a long tag list can't overflow either way.
This commit is contained in:
npeter83 2026-07-01 00:01:26 +02:00
parent cd9987c00f
commit 77707a3cbe
1 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/components/Channels.tsx
View file

@ -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<HTMLDivElement | null>(null);
const btnRef = useRef<HTMLButtonElement | null>(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({
</button>
))}
<button
onClick={() => setOpen((o) => !o)}
ref={btnRef}
onClick={toggle}
title={t("channels.row.editTags")}
aria-label={t("channels.row.editTags")}
className="w-5 h-5 inline-flex items-center justify-center rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
@ -692,7 +705,11 @@ function TagsCell({
<Plus className="w-3 h-3" />
</button>
{open && (
<div className="glass-menu absolute left-0 top-full mt-1 z-30 w-44 rounded-xl p-1.5 animate-[popIn_0.16s_ease]">
<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] ${
openUp ? "bottom-full mb-1" : "top-full mt-1"
}`}
>
{userTags.map((tg) => {
const on = c.tag_ids.includes(tg.id);
return (