fix: thread rerender due to thread scrolling padding subscription (#6629)

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"
+    />
+  )
+}

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
+           <ThreadPadding threadId={threadId} scrollContainerRef={scrollContainerRef} />
-              style={{ height: paddingHeight }}
-              className="flex-shrink-0"
-              data-testid="chat-padding"
-            />
           </div>
         </div>
         <div