From 9d07698623a4b13e28e1f62a75fdfe29180727d3 Mon Sep 17 00:00:00 2001
From: Alex Parker <7272359+ajp-io@users.noreply.github.com>
Date: Wed, 18 Jun 2025 21:53:42 -0400
Subject: [PATCH 1/2] only auto scroll if at bottom of logs

---
 .../wizard/installation/shared/LogViewer.tsx  | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

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<LogViewerProps> = ({
   onToggle
 }) => {
   const logsEndRef = useRef<HTMLDivElement>(null);
+  const logContainerRef = useRef<HTMLDivElement>(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 (
     <div className="mt-6" data-testid="log-viewer">
@@ -38,6 +50,8 @@ const LogViewer: React.FC<LogViewerProps> = ({
       </button>
       {isExpanded && (
         <div 
+          ref={logContainerRef}
+          onScroll={handleScroll}
           className="bg-gray-900 text-gray-200 rounded-md p-4 h-48 overflow-y-auto font-mono text-xs mt-2"
           data-testid="log-viewer-content"
         >

From de90c6c2755953a28138078b8e24fc55673fc936 Mon Sep 17 00:00:00 2001
From: Alex Parker <7272359+ajp-io@users.noreply.github.com>
Date: Fri, 11 Jul 2025 09:34:33 -0400
Subject: [PATCH 2/2] more specific function name

---
 web/src/components/wizard/installation/shared/LogViewer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/wizard/installation/shared/LogViewer.tsx b/web/src/components/wizard/installation/shared/LogViewer.tsx
index 70bc94479..510fcaea9 100644
--- a/web/src/components/wizard/installation/shared/LogViewer.tsx
+++ b/web/src/components/wizard/installation/shared/LogViewer.tsx
@@ -19,7 +19,7 @@ const LogViewer: React.FC<LogViewerProps> = ({
   const [isAtBottom, setIsAtBottom] = useState(true);
 
   // Check if user is at bottom of logs
-  const handleScroll = () => {
+  const handleLogContainerScroll = () => {
     if (!logContainerRef.current) return;
     
     const { scrollTop, scrollHeight, clientHeight } = logContainerRef.current;
@@ -51,7 +51,7 @@ const LogViewer: React.FC<LogViewerProps> = ({
       {isExpanded && (
         <div 
           ref={logContainerRef}
-          onScroll={handleScroll}
+          onScroll={handleLogContainerScroll}
           className="bg-gray-900 text-gray-200 rounded-md p-4 h-48 overflow-y-auto font-mono text-xs mt-2"
           data-testid="log-viewer-content"
         >