From 38230c0d12ef0b4394144d05ed7c79cbaab66bee Mon Sep 17 00:00:00 2001
From: Paul Payne <paul@payne.io>
Date: Tue, 30 Jun 2026 23:10:47 -0700
Subject: [PATCH] Stop new log lines from jumping the whole page

The auto-scroll effect used bottomRef.scrollIntoView(), which walks the
entire scroll-ancestor chain up to the window and scrolls the page to the
log's bottom on every new line. Scroll the <pre> container directly via
scrollTop instead, so only the log pane moves. Drop the now-unused
bottom marker div and ref.
---
 app/src/components/LogViewer.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/src/components/LogViewer.tsx b/app/src/components/LogViewer.tsx
index b7a4921..b0bf04e 100644
--- a/app/src/components/LogViewer.tsx
+++ b/app/src/components/LogViewer.tsx
@@ -22,7 +22,6 @@ export const LogViewer = forwardRef<LogViewerHandle, LogViewerProps>(function Lo
   // When true, new log lines scroll the view to the bottom. Scrolling up to read
   // pauses it; scrolling back to the bottom (or the play button) resumes.
   const [autoScroll, setAutoScroll] = useState(true)
-  const bottomRef = useRef<HTMLDivElement>(null)
   const preRef = useRef<HTMLPreElement>(null)
 
   useEffect(() => {
@@ -57,10 +56,13 @@ export const LogViewer = forwardRef<LogViewerHandle, LogViewerProps>(function Lo
     return () => window.removeEventListener("keydown", onKey)
   }, [maximized])
 
-  // Jump to the newest line only while auto-scroll is on. Instant (not smooth) so
-  // the scroll-position check below never sees a mid-animation false "scrolled up".
+  // Jump to the newest line only while auto-scroll is on. Scroll the <pre>
+  // container directly (not scrollIntoView, which would walk up to the window
+  // and jump the whole page). Instant, so the scroll-position check below never
+  // sees a mid-animation false "scrolled up".
   useEffect(() => {
-    if (autoScroll) bottomRef.current?.scrollIntoView()
+    const el = preRef.current
+    if (autoScroll && el) el.scrollTop = el.scrollHeight
   }, [logs, autoScroll])
 
   // Keep auto-scroll in sync with where the user is: away from the bottom pauses,
@@ -129,7 +131,6 @@ export const LogViewer = forwardRef<LogViewerHandle, LogViewerProps>(function Lo
             </div>
           ))
         )}
-        <div ref={bottomRef} />
       </pre>
     </div>
   )