From 9efe09564bc0f6fca488f165a991ed9d90548457 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 12 Dec 2025 14:48:56 -0600
Subject: [PATCH] fix: desktop layout

---
 packages/ui/src/components/session-turn.css |  4 ++--
 packages/ui/src/components/session-turn.tsx | 12 +++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 6bead9b57..3b7d74dc2 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/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));
     }
   }
 
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index c09754a59..a1c3b97b7 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/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>