devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: remove 150px threshold from scroll observers

Browse Source 
The dist < 150 check caused the ResizeObserver and media load
listener to miss large layout shifts (e.g., GIF loading adding
400+ px of height). The isAtBottomRef gate already determines
whether to auto-scroll — the pixel threshold is redundant.
This commit is contained in:
Jannis Braun
2026-03-25 04:50:24 +01:00
parent 6817f65e56
commit f433093777
1 changed files with 4 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/MessageList.tsx
+4 -13
View File
@@ -170,14 +170,8 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
const observer = new ResizeObserver(() => {
const c = containerRef.current;
if (!c) return;
// Use a tight threshold (150px) checked at fire time instead of the
// generous 5000px isNearBottomRef — prevents snapping the user back
// to bottom during momentum/inertial scrolling on mobile.
const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
if (isAtBottomRef.current && dist < 150) {
c.scrollTop = c.scrollHeight;
}
if (!c || !isAtBottomRef.current) return;
c.scrollTop = c.scrollHeight;
});
observer.observe(content);
return () => observer.disconnect();
@@ -192,11 +186,8 @@ export function MessageList({ channelId, jumpToMessageId, onJumpComplete }: Mess
const handleMediaLoad = () => {
const c = containerRef.current;
if (!c) return;
const dist = c.scrollHeight - c.scrollTop - c.clientHeight;
if (isAtBottomRef.current && dist < 150) {
c.scrollTop = c.scrollHeight;
}
if (!c || !isAtBottomRef.current) return;
c.scrollTop = c.scrollHeight;
};
content.addEventListener('load', handleMediaLoad, true);