From 70efde8aa6969fd6a3b97e55c016e410c4b9e1bc Mon Sep 17 00:00:00 2001 From: Ryan Malloy Date: Mon, 23 Feb 2026 14:56:41 -0700 Subject: [PATCH] Fix chat panel scroll: replace scrollIntoView with container.scrollTo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit scrollIntoView walks up the DOM and scrolls every ancestor, including the panel with overflow:hidden — this pushed the header and messages area off-screen after long LLM responses. Using container.scrollTo limits scrolling to only the messages div. --- frontend/src/components/chat/ChatWidget.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/chat/ChatWidget.tsx b/frontend/src/components/chat/ChatWidget.tsx index 53fbd9f..5ff4184 100644 --- a/frontend/src/components/chat/ChatWidget.tsx +++ b/frontend/src/components/chat/ChatWidget.tsx @@ -197,9 +197,14 @@ export default function ChatWidget() { const activeConv = getActiveConversation(); const messages = activeConv?.messages ?? []; - // Auto-scroll on new messages + // Auto-scroll on new messages — use direct scrollTop instead of scrollIntoView + // because scrollIntoView walks up the DOM and scrolls ALL ancestors (including + // the panel with overflow:hidden), which pushes the header off-screen. useEffect(() => { - messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); + const container = messagesEndRef.current?.parentElement; + if (container) { + container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' }); + } }, [messages.length, streaming]); // Focus input when panel opens