fix(chat): instant scroll + larger at-bottom threshold + footer spacer (Discord-clean)

2026-05-18 14:21:04 +02:00
parent 3d959aaadf
commit 92a6e01a26
1 changed files with 20 additions and 2 deletions
@@ -1046,14 +1046,32 @@ export function ConversationPage() {
            // the bottom; returning `false` from the callback when they're
            // scrolled up preserves their reading position when realtime
            // messages arrive (critical UX: do NOT jerk the user).
-            followOutput={(isAtBottom) => (isAtBottom ? 'smooth' : false)}
+            //
+            // We deliberately use 'auto' (instant) rather than 'smooth':
+            // with a smooth scroll animation, atBottomStateChange fires
+            // `false` mid-animation (scrollTop is briefly above the new
+            // bottom) and then `true` after settle — that flips
+            // stickToBottom twice, flashing the "Zum neuesten" pill and
+            // re-rendering the whole list. Instant scroll has zero
+            // mid-animation state so the cascade never happens.
+            followOutput={(isAtBottom) => (isAtBottom ? 'auto' : false)}
            atBottomStateChange={handleAtBottomStateChange}
-            atBottomThreshold={80}
+            // 250 px tolerance — large enough that appending a tall row
+            // (image, voice note, grouped attachments) doesn't push the
+            // user out of the at-bottom zone. The previous 80 px flipped
+            // stickToBottom on nearly every typical message arrival.
+            atBottomThreshold={250}
            rangeChanged={handleRangeChanged}
            startReached={handleStartReached}
            // Render rows just outside the viewport so fast scrolling
            // doesn't briefly flash empty space.
            increaseViewportBy={400}
+            // Visual breathing space below the last message so a bubble
+            // bottom doesn't sit flush against the composer top — matches
+            // Discord's chat-pane bottom padding.
+            components={{
+              Footer: () => <div style={{ height: '12px' }} />,
+            }}
            itemContent={(_index, row) => {
              if (row.kind === 'loader') {
                return (