Fix scripture verse popup clipped by overflow:hidden parents; v1.2.2

Switch from position:absolute (relative to trigger) to position:fixed
with getBoundingClientRect() so the popup escapes any overflow:hidden
ancestor. Also closes on scroll and window resize.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/QASection.tsx

@@ -218,7 +218,9 @@ function ScriptureTooltip({ refText, bookId, chapter, verseStart, verseEnd }: {
   const [verses, setVerses] = useState<VerseData[]>([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(false)
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null)
   const wrapRef = useRef<HTMLSpanElement>(null)
+  const btnRef = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
     if (!open) return
@@ -251,20 +253,35 @@ function ScriptureTooltip({ refText, bookId, chapter, verseStart, verseEnd }: {
       })
   }, [open, bookId, chapter, verseStart, verseEnd, verses.length])
 
+  // Compute fixed position from the trigger button so the popup escapes overflow:hidden parents
+  useEffect(() => {
+    if (!open || !btnRef.current) { setPos(null); return }
+    const rect = btnRef.current.getBoundingClientRect()
+    const POPUP_W = 360
+    const left = Math.max(8, Math.min(rect.left, window.innerWidth - POPUP_W - 12))
+    setPos({ top: rect.bottom + 8, left })
+  }, [open])
+
   useEffect(() => {
     if (!open) return
     function handleClickOutside(e: MouseEvent) {
-      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) {
-        setOpen(false)
-      }
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false)
     }
+    function handleDismiss() { setOpen(false) }
     document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
+    window.addEventListener('scroll', handleDismiss, { passive: true, capture: true })
+    window.addEventListener('resize', handleDismiss)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      window.removeEventListener('scroll', handleDismiss, { capture: true })
+      window.removeEventListener('resize', handleDismiss)
+    }
   }, [open])
 
   return (
     <span ref={wrapRef} className="scripture-ref-wrap">
       <button
+        ref={btnRef}
         type="button"
         className="scripture-ref"
         onClick={() => setOpen(o => !o)}
@@ -273,8 +290,12 @@ function ScriptureTooltip({ refText, bookId, chapter, verseStart, verseEnd }: {
       >
         {refText}
       </button>
-      {open && (
-        <span className="scripture-popup" role="tooltip">
+      {open && pos && (
+        <span
+          className="scripture-popup"
+          role="tooltip"
+          style={{ position: 'fixed', top: pos.top, left: pos.left, bottom: 'auto' }}
+        >
           <span className="scripture-popup-header">
             <strong>{refText}</strong>
             <button type="button" className="scripture-popup-close" onClick={() => setOpen(false)} aria-label="Close">✕</button>