PR #15562: app/ui: fix chat content scrolling past viewport during response loading

• Repository: ollama/ollama
• Author: matteocelani
• State: open | merged: False
• Link: https://github.com/ollama/ollama/pull/15562

Description (problem / solution / changelog)

When sending a message, the loading indicator appears and the user can scroll down past the content, causing the conversation to disappear above the viewport.

The spacer calculation in useMessageAutoscroll did not account for all visible content (dots, download progress, padding), creating extra scrollable space. The hook also had unused refs, state that was not reset between interactions, and observers that were recreated on every message update. Simplified the hook to address these issues.

Changes:

• app/ui/app/src/hooks/useMessageAutoscroll.ts: simplified spacer calculation and scroll logic
• app/ui/app/src/components/Chat.tsx: added overflow-anchor: auto to the scroll container

How scroll works now:

1. User sends a message — it scrolls to the top of the viewport. A spacer div fills the remaining space below so maxScroll lands exactly with the user message at the top.
2. The response streams below the user message. The spacer shrinks as the response grows. Auto-scroll follows the tail.
3. If the user scrolls up, auto-scroll pauses. If they return to the bottom (within 50px), it resumes.
4. When the response fills the viewport the spacer reaches 0 and auto-scroll tracks naturally.
5. After the response completes the spacer stays — the user message remains at the top until the next message or chat change.

What was fixed:

• Spacer now uses container.scrollHeight - spacerInDOM for actual content height — accounts for dots, download, padding automatically
• Removed unused scroll tracking refs (lastScrollHeightRef, lastScrollTopRef)
• Replaced isActiveInteraction / hasSubmittedMessage useState pair with a single ref (avoids cascading re-renders)
• Observers no longer recreated on every message update
• Replaced double requestAnimationFrame with useLayoutEffect + single requestAnimationFrame so the scroll runs after React applies the spacer to the DOM
• Removed 40% extra spacer height during streaming (containerHeight * 0.4) that amplified overscroll
• getLastUserIndex depends on messages.length instead of messages — not recreated on every streaming token
• paddingTop cached in a ref to avoid getComputedStyle reflow

Fixes #15557

Changed files

• app/ui/app/src/components/Chat.tsx (modified, +1/-1)
• app/ui/app/src/hooks/useMessageAutoscroll.ts (modified, +120/-271)