fix: desktop layout

1 files changed, 9 insertions, 15 deletions

diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 0cbe1a0d2..708ac5b83 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -60,8 +60,8 @@ export function SessionTurn(
   const working = createMemo(() => status()?.type !== "idle")
 
   let scrollRef: HTMLDivElement | undefined
-  let contentRef: HTMLDivElement | undefined
-  let stickyHeaderRef: HTMLDivElement | undefined
+  const [contentRef, setContentRef] = createSignal<HTMLDivElement>()
+  const [stickyHeaderRef, setStickyHeaderRef] = createSignal<HTMLDivElement>()
   const [userScrolled, setUserScrolled] = createSignal(false)
   const [stickyHeaderHeight, setStickyHeaderHeight] = createSignal(0)
 
@@ -86,25 +86,19 @@ export function SessionTurn(
     }
   })
 
-  onMount(() => {
-    if (!contentRef) return
-    createResizeObserver(contentRef, () => {
-      if (!scrollRef || userScrolled() || !working()) return
-      scrollRef.scrollTop = scrollRef.scrollHeight
-    })
+  createResizeObserver(contentRef, () => {
+    if (!scrollRef || userScrolled() || !working()) return
+    scrollRef.scrollTop = scrollRef.scrollHeight
   })
 
-  onMount(() => {
-    if (!stickyHeaderRef) return
-    createResizeObserver(stickyHeaderRef, ({ height }) => {
-      setStickyHeaderHeight(height + 8)
-    })
+  createResizeObserver(stickyHeaderRef, ({ height }) => {
+    setStickyHeaderHeight(height + 8)
   })
 
   return (
     <div data-component="session-turn" class={props.classes?.root}>
       <div ref={scrollRef} onScroll={handleScroll} data-slot="session-turn-content" class={props.classes?.content}>
-        <div ref={contentRef} onClick={handleInteraction}>
+        <div ref={setContentRef} onClick={handleInteraction}>
           <Show when={message()}>
             {(message) => {
               const assistantMessages = createMemo(() => {
@@ -257,7 +251,7 @@ export function SessionTurn(
                   style={{ "--sticky-header-height": `${stickyHeaderHeight()}px` }}
                 >
                   {/* Sticky Header */}
-                  <div ref={stickyHeaderRef} data-slot="session-turn-sticky-header">
+                  <div ref={setStickyHeaderRef} data-slot="session-turn-sticky-header">
                     <div data-slot="session-turn-message-header">
                       <div data-slot="session-turn-message-title">
                         <Switch>