diff --git a/web/src/components/wizard/installation/shared/LogViewer.tsx b/web/src/components/wizard/installation/shared/LogViewer.tsx index 1c81ca8b7..70bc94479 100644 --- a/web/src/components/wizard/installation/shared/LogViewer.tsx +++ b/web/src/components/wizard/installation/shared/LogViewer.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect } from 'react'; +import React, { useRef, useEffect, useState } from 'react'; import { ChevronDown, ChevronUp } from 'lucide-react'; interface LogViewerProps { @@ -15,12 +15,24 @@ const LogViewer: React.FC = ({ onToggle }) => { const logsEndRef = useRef(null); + const logContainerRef = useRef(null); + const [isAtBottom, setIsAtBottom] = useState(true); + // Check if user is at bottom of logs + const handleScroll = () => { + if (!logContainerRef.current) return; + + const { scrollTop, scrollHeight, clientHeight } = logContainerRef.current; + const isBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 10; + setIsAtBottom(isBottom); + }; + + // Only auto-scroll if user is at bottom useEffect(() => { - if (logsEndRef.current && isExpanded) { + if (logsEndRef.current && isExpanded && isAtBottom) { logsEndRef.current.scrollIntoView({ behavior: 'smooth' }); } - }, [logs, isExpanded]); + }, [logs, isExpanded, isAtBottom]); return (
@@ -38,6 +50,8 @@ const LogViewer: React.FC = ({ {isExpanded && (