fix(player): a link that opens the cut text is scrolled back into view

Focus had scrolled the clamped box itself; opened, the link dropped by that much, out of a scrolling panel's sight. DESIGN states where Close sits in the stacked layout; a stale test comment goes.
2026-10-09 23:46:40 +02:00
parent 2cff4ad954
commit 77638f7a0b
5 changed files with 21 additions and 7 deletions
@@ -49,12 +49,22 @@ export function ClampedText({
  }, [text, expanded]);
  // Measured from the text's top, not against the box on screen: focus scrolls the clamped box itself
  // to bring the link into view (overflow:hidden still scrolls), so on screen it looked "in sight".
+  const revealing = useRef<Element | null>(null);
  const revealFocused = (e: FocusEvent<HTMLDivElement>) => {
    const box = e.currentTarget;
    if (expanded || e.target === box) return;
    const top = box.getBoundingClientRect().top - box.scrollTop;
-    if (e.target.getBoundingClientRect().bottom - top > box.clientHeight + 1) setExpanded(true);
+    if (e.target.getBoundingClientRect().bottom - top <= box.clientHeight + 1) return;
+    revealing.current = e.target;
+    setExpanded(true);
  };
+  // That scroll was the box's own: opened, the link drops back to its place in the text, as far below
+  // as the box had scrolled, and out of a scrolling panel's sight. Brought back into view.
+  useLayoutEffect(() => {
+    const el = revealing.current;
+    revealing.current = null;
+    if (expanded && el?.isConnected) el.scrollIntoView({ block: "nearest" });
+  }, [expanded]);
  return (
    <div className={className}>
      <div