fix: desktop layout

packages/ui/src/components/session-turn.css

@@ -214,10 +214,10 @@
   }
 
   [data-component="sticky-accordion-header"] {
-    top: 40px;
+    top: var(--sticky-header-height, 40px);
 
     &[data-expanded]::before {
-      top: -40px;
+      top: calc(-1 * var(--sticky-header-height, 40px));
     }
   }
 

packages/ui/src/components/session-turn.tsx

@@ -62,7 +62,9 @@ export function SessionTurn(
 
   let scrollRef: HTMLDivElement | undefined
   let contentRef: HTMLDivElement | undefined
+  let stickyHeaderRef: HTMLDivElement | undefined
   const [userScrolled, setUserScrolled] = createSignal(false)
+  const [stickyHeaderHeight, setStickyHeaderHeight] = createSignal(0)
 
   function handleScroll() {
     if (!scrollRef) return
@@ -93,6 +95,13 @@ export function SessionTurn(
     })
   })
 
+  onMount(() => {
+    if (!stickyHeaderRef) return
+    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}>
@@ -238,9 +247,10 @@ export function SessionTurn(
                   data-message={message().id}
                   data-slot="session-turn-message-container"
                   class={props.classes?.container}
+                  style={{ "--sticky-header-height": `${stickyHeaderHeight()}px` }}
                 >
                   {/* Sticky Header */}
-                  <div data-slot="session-turn-sticky-header">
+                  <div ref={stickyHeaderRef} data-slot="session-turn-sticky-header">
                     <div data-slot="session-turn-message-header">
                       <div data-slot="session-turn-message-title">
                         <Switch>