Fix dynamic tab capacity measurement

src/App.css

@@ -418,6 +418,7 @@ textarea:focus-visible {
   display: grid;
   gap: 4px;
   justify-items: center;
+  width: 100%;
   min-width: 0;
 }
 
@@ -426,6 +427,7 @@ textarea:focus-visible {
   flex-wrap: nowrap;
   justify-content: center;
   gap: 3px;
+  width: 100%;
   max-width: 100%;
   min-height: 25px;
   overflow: hidden;

src/App.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   addTagToVerse,
   getCommentaryForVerse,
@@ -87,12 +87,14 @@ function centeredWindow<T>(items: T[], activeIndex: number, visibleCount: number
   }
 }
 
-function useMeasuredTabCapacity(minItemWidth: number, reservedWidth: number, fallbackCount: number) {
+function useMeasuredTabCapacity(minItemWidth: number, reservedWidth: number) {
-  const ref = useRef<HTMLDivElement | null>(null)
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const [visibleCount, setVisibleCount] = useState(fallbackCount)
+  const [visibleCount, setVisibleCount] = useState(1)
+  const ref = useCallback((node: HTMLDivElement | null) => {
+    setElement(node)
+  }, [])
 
   useEffect(() => {
-    const element = ref.current
     if (!element) return
 
     const measure = () => {
@@ -105,7 +107,7 @@ function useMeasuredTabCapacity(minItemWidth: number, reservedWidth: number, fal
     observer.observe(element)
 
     return () => observer.disconnect()
-  }, [fallbackCount, minItemWidth, reservedWidth])
+  }, [element, minItemWidth, reservedWidth])
 
   return { ref, visibleCount }
 }
@@ -389,8 +391,8 @@ function App() {
   const audioQueueIndexRef = useRef(0)
   const hydratedNoteChapters = useRef(new Set<string>())
   const workspaceHydrated = useRef(false)
-  const bookTabCapacity = useMeasuredTabCapacity(58, 72, 8)
+  const bookTabCapacity = useMeasuredTabCapacity(58, 72)
-  const chapterTabCapacity = useMeasuredTabCapacity(34, 58, 10)
+  const chapterTabCapacity = useMeasuredTabCapacity(34, 58)
 
   function applyStudySettings(settings?: Partial<StudySettings>) {
     if (!settings) return