potential fix for not jumping to reading position sometimes

frontend/src/components/collections/CollectionReadingView.tsx

@@ -39,8 +39,8 @@ export default function CollectionReadingView({
       (scrolled - contentTop + windowHeight * 0.3) / contentHeight
     ));
     
-    // Convert to character position in the plain text content
-    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
+    // Convert to character position (ALWAYS use contentHtml for consistency with backend)
+    const textLength = story.contentHtml?.length || 0;
     return Math.floor(scrollRatio * textLength);
   }, [story]);
 
@@ -48,7 +48,7 @@ export default function CollectionReadingView({
   const calculateReadingPercentage = useCallback((currentPosition: number): number => {
     if (!story) return 0;
 
-    const totalLength = story.contentPlain?.length || story.contentHtml?.length || 0;
+    const totalLength = story.contentHtml?.length || 0;
     if (totalLength === 0) return 0;
 
     return Math.round((currentPosition / totalLength) * 100);
@@ -58,7 +58,7 @@ export default function CollectionReadingView({
   const scrollToCharacterPosition = useCallback((position: number) => {
     if (!contentRef.current || !story || hasScrolledToPosition) return;
 
-    const textLength = story.contentPlain?.length || story.contentHtml?.length || 0;
+    const textLength = story.contentHtml?.length || 0;
     if (textLength === 0 || position === 0) return;
 
     const ratio = position / textLength;
@@ -109,7 +109,11 @@ export default function CollectionReadingView({
   // Auto-scroll to saved reading position when story content is loaded
   useEffect(() => {
     if (story && !hasScrolledToPosition) {
-      const timeout = setTimeout(() => {
+      let cancelled = false;
+
+      const performScroll = () => {
+        if (cancelled) return;
+
         console.log('Collection view - initializing reading position tracking, saved position:', story.readingPosition);
         if (story.readingPosition && story.readingPosition > 0) {
           console.log('Collection view - auto-scrolling to saved position:', story.readingPosition);
@@ -121,9 +125,51 @@ export default function CollectionReadingView({
           setReadingPercentage(0);
           setHasScrolledToPosition(true);
         }
-      }, 500);
-      
-      return () => clearTimeout(timeout);
+      };
+
+      // Wait for images to load before scrolling so scrollHeight is accurate
+      const waitForImagesAndScroll = () => {
+        if (!contentRef.current) {
+          setTimeout(performScroll, 500);
+          return;
+        }
+
+        const images = contentRef.current.querySelectorAll('img');
+        const unloadedImages = Array.from(images).filter(img => !img.complete);
+
+        if (unloadedImages.length === 0) {
+          setTimeout(performScroll, 100);
+          return;
+        }
+
+        console.log(`Collection view - waiting for ${unloadedImages.length} images to load before scrolling`);
+        let loadedCount = 0;
+
+        const fallbackTimeout = setTimeout(() => {
+          console.log('Collection view - image load timeout reached, scrolling anyway');
+          performScroll();
+        }, 5000);
+
+        const onImageReady = () => {
+          loadedCount++;
+          if (loadedCount >= unloadedImages.length) {
+            clearTimeout(fallbackTimeout);
+            setTimeout(performScroll, 50);
+          }
+        };
+
+        unloadedImages.forEach(img => {
+          img.addEventListener('load', onImageReady, { once: true });
+          img.addEventListener('error', onImageReady, { once: true });
+        });
+      };
+
+      const timeout = setTimeout(waitForImagesAndScroll, 100);
+
+      return () => {
+        cancelled = true;
+        clearTimeout(timeout);
+      };
     }
   }, [story, scrollToCharacterPosition, calculateReadingPercentage, hasScrolledToPosition]);