warehack.ing/spicebook
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix chat panel scroll: replace scrollIntoView with container.scrollTo

Browse Source 
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.
This commit is contained in:
Ryan Malloy 2026-02-23 14:56:41 -07:00
parent 5db321c8e3
commit 70efde8aa6
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/chat/ChatWidget.tsx
View File

@ -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