diff options
| author | Adam <[email protected]> | 2025-12-12 14:48:56 -0600 |
|---|---|---|
| committer | Adam <[email protected]> | 2025-12-12 15:24:42 -0600 |
| commit | 9efe09564bc0f6fca488f165a991ed9d90548457 (patch) | |
| tree | 8aa43d4885e0a8bdd8a7a828f9e18ab5103555a5 | |
| parent | ccdd77032aedf9ce9fdf48ad74e79a9e308a370c (diff) | |
| download | opencode-9efe09564bc0f6fca488f165a991ed9d90548457.tar.gz opencode-9efe09564bc0f6fca488f165a991ed9d90548457.zip | |
fix: desktop layout
| -rw-r--r-- | packages/ui/src/components/session-turn.css | 4 | ||||
| -rw-r--r-- | 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> |