From 92a6e01a26707a8412f237acd672beaecafb081b Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Mon, 18 May 2026 14:21:04 +0200
Subject: [PATCH] fix(chat): instant scroll + larger at-bottom threshold +
 footer spacer (Discord-clean)

---
 apps/desktop/src/pages/ConversationPage.tsx | 22 +++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/pages/ConversationPage.tsx b/apps/desktop/src/pages/ConversationPage.tsx
index 3332004..b2edac0 100644
--- a/apps/desktop/src/pages/ConversationPage.tsx
+++ b/apps/desktop/src/pages/ConversationPage.tsx
@@ -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 (