fix: dynamic viewport adjustment to prevent scroll jumping on small screens #7027
Conversation
dosubot
bot
added
size:S
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
| // Calculate dynamic bottom viewport based on window height | ||
| // For smaller screens (< 800px), use a smaller viewport to prevent jumping | ||
| // For larger screens, use a larger viewport for smoother scrolling | ||
| const dynamicBottomViewport = useMemo(() => { |
There was a problem hiding this comment.
The calculation will recalculate whenever changes. Since window resize events can fire frequently during resizing, could this cause performance issues? Would it be worth considering debouncing the window size changes to reduce recalculations?
|
|
||
| // Scale the bottom viewport based on window height | ||
| // Minimum of 500px for very small screens, maximum of 2000px for large screens | ||
| const scaledViewport = Math.min(2000, Math.max(500, windowHeight * 0.8)) |
There was a problem hiding this comment.
These magic numbers (0.8 for 80%, 500px min, 2000px max) work well but aren't self-documenting. Would it be helpful to extract these as named constants?
| // For smaller screens (< 800px), use a smaller viewport to prevent jumping | ||
| // For larger screens, use a larger viewport for smoother scrolling | ||
| const dynamicBottomViewport = useMemo(() => { | ||
| if (!windowHeight) return 1000 // Default fallback |
There was a problem hiding this comment.
Is it intentional that when is undefined, we fall back to 1000px - the same fixed value that was causing the original scrolling issues on smaller screens? Should we consider using a smaller default or calculating based on a typical small screen height?
hannesrudolph
added
the
Issue/PR - Triage
|
The issue doens't seem to be related to screen height |
Summary
This PR fixes the scrolling jump issue reported in #7026 that occurs on smaller screens (laptops, resized windows). The issue was introduced in PR #6697 which fixed a memory leak but caused scrolling problems due to a fixed viewport bottom value.
Problem
The fixed
bottom: 1000value inincreaseViewportBywas causing the virtual scrolling to jump around on smaller screens, making it difficult for users to read messages as the position would constantly shift.Solution
Implemented dynamic viewport adjustment based on window height:
useWindowSizehook to track viewport dimensionsChanges
webview-ui/src/components/chat/ChatView.tsx:useWindowSizehook from react-usebottom: 1000withdynamicBottomViewportTesting
Related Issues
Impact
This change provides a better scrolling experience for users on smaller screens while maintaining the memory optimization improvements from the previous fix.
Important
Fixes scroll jumping on small screens by dynamically adjusting viewport size in
ChatView.tsx.ChatView.tsx.bottom: 1000withdynamicBottomViewportcalculated as 80% of window height, scaling from 500px to 2000px.useWindowSizefromreact-useinChatView.tsx.dynamicBottomViewportcalculation usinguseMemobased onwindowHeight.This description was created by
for 6f9374f. You can customize this summary. It will automatically update as commits are pushed.