Reader: resizable side panel

Drag the left edge of the verse side panel to resize it (arrow keys too,
Shift for bigger steps; double-click resets). The text reflows to make room,
and the width is remembered on this device. Reuses the Study page's resize
handle; the hook now takes the CSS variable to drive.

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

src/components/reader/Sheet.jsx

@@ -7,7 +7,7 @@ import { CloseIcon } from './icons.jsx';
 
 const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
-export default function Sheet({ open, onClose, title, label, headerRight, modal = true, pane = false, children }) {
+export default function Sheet({ open, onClose, title, label, headerRight, modal = true, pane = false, panelRef, edge, children }) {
   const dialogRef = useRef(null);
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
@@ -41,15 +41,16 @@ export default function Sheet({ open, onClose, title, label, headerRight, modal
     <>
       {modal && <div className="fixed inset-0 z-40 bg-black/30" onClick={onClose} aria-hidden="true" />}
       <div
-        ref={dialogRef}
+        ref={(el) => { dialogRef.current = el; if (panelRef) panelRef.current = el; }}
         role="dialog"
         aria-modal={modal ? 'true' : undefined}
         aria-label={typeof title === 'string' ? title : label}
         tabIndex={-1}
         className={`fixed inset-x-0 bottom-0 z-50 flex max-h-[72vh] flex-col rounded-t-2xl focus:outline-none border-t border-[var(--r-line)] bg-[var(--r-bar)] text-[var(--r-text)] font-sans ${
-          pane ? 'lg:inset-x-auto lg:bottom-0 lg:right-0 lg:top-12 lg:max-h-none lg:w-[24rem] lg:rounded-none lg:border-l lg:border-t-0' : 'sm:left-1/2 sm:right-auto sm:w-[36rem] sm:-translate-x-1/2'
+          pane ? 'lg:inset-x-auto lg:bottom-0 lg:right-0 lg:top-12 lg:max-h-none lg:w-[var(--reader-pane,24rem)] lg:rounded-none lg:border-l lg:border-t-0' : 'sm:left-1/2 sm:right-auto sm:w-[36rem] sm:-translate-x-1/2'
         }`}
       >
+        {edge}
         <div className="mx-auto mt-2 h-1 w-9 shrink-0 rounded-full bg-[var(--r-line)] lg:hidden" />
         <div className="flex items-center justify-between gap-2 px-4 pb-2 pt-2">
           <div className="min-w-0 truncate text-sm font-medium">{title}</div>

src/components/reader/VerseSheet.jsx

@@ -142,7 +142,7 @@ function CompareTab({ book, chapter, verse, current }) {
 export default function VerseSheet({
   verse, book, bookName, chapter, translation, words, crossRefs, crossRefsLoading, onLoadCrossRefs,
   bookmarkColor, onToggleBookmark, onCycleColor, onJump, onClose, request,
-  verseHighlights = [], colorLabels = {}, onHighlightVerse, onClearVerseHighlights,
+  verseHighlights = [], colorLabels = {}, onHighlightVerse, onClearVerseHighlights, panelRef, resizeHandle,
 }) {
   const [tab, setTab] = useState('commentary');
   const [copied, setCopied] = useState(false);
@@ -175,7 +175,7 @@ export default function VerseSheet({
 
   return (
     <Sheet
-      open modal={false} pane onClose={onClose}
+      open modal={false} pane onClose={onClose} panelRef={panelRef} edge={resizeHandle}
       title={`${bookName} ${chapter}:${verse.number}`}
       headerRight={(
         <>