wild-cloud/wild-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop new log lines from jumping the whole page

Browse Source 
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.
This commit is contained in:
Paul Payne
2026-06-30 23:10:47 -07:00
parent e1a4692a43
commit 38230c0d12
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/components/LogViewer.tsx
View File

@@ -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 // 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. // pauses it; scrolling back to the bottom (or the play button) resumes.
const [autoScroll, setAutoScroll] = useState(true) const [autoScroll, setAutoScroll] = useState(true)
const bottomRef = useRef<HTMLDivElement>(null)
const preRef = useRef<HTMLPreElement>(null) const preRef = useRef<HTMLPreElement>(null)
useEffect(() => { useEffect(() => {
@@ -57,10 +56,13 @@ export const LogViewer = forwardRef<LogViewerHandle, LogViewerProps>(function Lo
return () => window.removeEventListener("keydown", onKey) return () => window.removeEventListener("keydown", onKey)
}, [maximized]) }, [maximized])
// Jump to the newest line only while auto-scroll is on. Instant (not smooth) so // Jump to the newest line only while auto-scroll is on. Scroll the <pre>
// the scroll-position check below never sees a mid-animation false "scrolled up". // 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(() => { useEffect(() => {
if (autoScroll) bottomRef.current?.scrollIntoView() const el = preRef.current
if (autoScroll && el) el.scrollTop = el.scrollHeight
}, [logs, autoScroll]) }, [logs, autoScroll])
// Keep auto-scroll in sync with where the user is: away from the bottom pauses, // 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>
)) ))
)} )}
<div ref={bottomRef} />
</pre> </pre>
</div> </div>
) )