Fix story page scrolling and ellipsis spacing

public/js/ui-display-handler-module.js

@@ -34,6 +34,7 @@ class UIDisplayHandlerModule extends BaseModule {
             'displayText',
             'renderSentence',
             'handleDeferredMediaBlock',
+            'scrollStoryToEnd',
             'rerenderStory',
             'clear',
             'scheduleRerender',
@@ -397,14 +398,11 @@ class UIDisplayHandlerModule extends BaseModule {
                 }
             });
 
+            this.scrollStoryToEnd(true);
+
             // Start coordinated playback (animation + TTS), including chapter headings.
             await this.playbackCoordinator.play(sentence);
 
-            // Scroll to bottom
-            if (this.pageRight) {
-                this.pageRight.scrollTop = this.pageRight.scrollHeight;
-            }
-
             // Call completion callback
             if (sentence.onComplete) {
                 sentence.onComplete();
@@ -464,6 +462,19 @@ class UIDisplayHandlerModule extends BaseModule {
         }
     }
 
+    scrollStoryToEnd(smooth = true) {
+        if (!this.pageRight) {
+            return;
+        }
+
+        window.requestAnimationFrame(() => {
+            this.pageRight.scrollTo({
+                top: Math.max(0, this.pageRight.scrollHeight - this.pageRight.clientHeight),
+                behavior: smooth ? 'smooth' : 'auto'
+            });
+        });
+    }
+
     async handleDeferredMediaBlock(sentence) {
         document.dispatchEvent(new CustomEvent('story:media-block', {
             detail: {
@@ -496,6 +507,9 @@ class UIDisplayHandlerModule extends BaseModule {
             this.container.appendChild(this.paragraphContainer);
         }
         this.renderedItems = [];
+        if (this.pageRight) {
+            this.pageRight.scrollTop = 0;
+        }
     }
     
     /**