From 311b79fe1348f1abc3aba35e818893f1debeec32 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Sun, 28 Sep 2025 22:36:05 +0700
Subject: [PATCH] fix: thread rerender due to thread scrolling padding
 subscription (#6629)

---
 web-app/src/containers/ThreadPadding.tsx | 19 +++++++++++++++++++
 web-app/src/routes/threads/$threadId.tsx | 11 ++---------
 2 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 web-app/src/containers/ThreadPadding.tsx

diff --git a/web-app/src/containers/ThreadPadding.tsx b/web-app/src/containers/ThreadPadding.tsx
new file mode 100644
index 000000000..3f4c725c3
--- /dev/null
+++ b/web-app/src/containers/ThreadPadding.tsx
@@ -0,0 +1,19 @@
+import { useThreadScrolling } from '@/hooks/useThreadScrolling'
+
+export const ThreadPadding = ({
+  threadId,
+  scrollContainerRef,
+}: {
+  threadId: string
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>
+}) => {
+  // Get padding height for ChatGPT-style message positioning
+  const { paddingHeight } = useThreadScrolling(threadId, scrollContainerRef)
+  return (
+    <div
+      style={{ height: paddingHeight }}
+      className="flex-shrink-0"
+      data-testid="chat-padding"
+    />
+  )
+}
diff --git a/web-app/src/routes/threads/$threadId.tsx b/web-app/src/routes/threads/$threadId.tsx
index 384cb764f..4b2c07592 100644
--- a/web-app/src/routes/threads/$threadId.tsx
+++ b/web-app/src/routes/threads/$threadId.tsx
@@ -21,7 +21,7 @@ import { PlatformFeatures } from '@/lib/platform/const'
 import { PlatformFeature } from '@/lib/platform/types'
 import ScrollToBottom from '@/containers/ScrollToBottom'
 import { PromptProgress } from '@/components/PromptProgress'
-import { useThreadScrolling } from '@/hooks/useThreadScrolling'
+import { ThreadPadding } from '@/containers/ThreadPadding'
 
 // as route.threadsDetail
 export const Route = createFileRoute('/threads/$threadId')({
@@ -49,9 +49,6 @@ function ThreadDetail() {
   const thread = useThreads(useShallow((state) => state.threads[threadId]))
   const scrollContainerRef = useRef<HTMLDivElement>(null)
 
-  // Get padding height for ChatGPT-style message positioning
-  const { paddingHeight } = useThreadScrolling(threadId, scrollContainerRef)
-
   useEffect(() => {
     setCurrentThreadId(threadId)
     const assistant = assistants.find(
@@ -191,11 +188,7 @@ function ThreadDetail() {
               data-test-id="thread-content-text"
             />
             {/* Persistent padding element for ChatGPT-style message positioning */}
-            <div
-              style={{ height: paddingHeight }}
-              className="flex-shrink-0"
-              data-testid="chat-padding"
-            />
+           <ThreadPadding threadId={threadId} scrollContainerRef={scrollContainerRef} />
           </div>
         </div>
         <div