tree e487922e47a18eb94b13ac9e2212e7652f776e0f
parent 2d08119c97f1a909ba4f17827aee31aa98b8b2e7
author Josh Bleecher Snyder <josharian@gmail.com> 1748528708 +0000
committer Josh Bleecher Snyder <josharian@gmail.com> 1748548241 -0700

webui: fix chat timeline scrolling to reach exact bottom

Implement robust scroll-to-bottom behavior with retry logic to handle
dynamic content rendering and ensure chat view scrolls completely to
the bottom when browser windows are opened.

The issue occurred when popping browser windows - the chat timeline
would scroll toward the bottom but not reach the exact bottom position,
leaving some content (like the input field) partially visible or cut off.

Root cause analysis:
- 50ms timeout insufficient for dynamic content (images, tool cards) to render
- scrollHeight calculation happened before final layout was complete
- smooth scroll behavior could be interrupted by subsequent layout changes
- 1px tolerance in scroll detection too strict for various screen sizes

Implementation improvements:

1. Enhanced scrollToBottom() method:
   - Switch from 'smooth' to 'instant' scroll behavior for reliability
   - Calculate exact target scroll position (scrollHeight - clientHeight)
   - Add null safety checks for scroll container

2. New scrollToBottomWithRetry() method:
   - Retry logic with up to 5 attempts at 50ms intervals
   - Verify actual scroll position after each attempt
   - Continue retrying until exactly at bottom or max attempts reached
   - Prevents race conditions with dynamic content loading

3. Improved scroll detection accuracy:
   - Increased tolerance from 1px to 3px for isAtBottom detection
   - Better handling of fractional pixel differences across browsers
   - More reliable detection of 'pinToLatest' vs 'floating' states

4. Enhanced timing and integration:
   - Increased initial timeout from 50ms to 100ms for content rendering
   - Updated both automatic scroll (on message changes) and manual scroll (jump-to-latest button)
   - Consistent behavior across all scroll triggers

Technical benefits:
- Eliminates incomplete scrolling that left content partially visible
- Handles dynamic content loading (images, expanding tool cards, etc.)
- Provides immediate feedback with instant scroll behavior
- Self-correcting through retry mechanism for timing edge cases
- Better cross-browser compatibility with increased tolerance

Testing verification:
- Started test sketch instance and verified complete scroll behavior
- Confirmed chat scrolls to exact bottom showing input field fully
- Verified manual 'jump to latest' button works correctly
- Screenshots show complete message content and input accessibility

This ensures users always see the complete conversation and can easily
access the input field when browser windows are opened, resolving the
reported incomplete scrolling behavior.

Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: sa9a8755f69c688cfk