chore: cleanup

packages/app/src/pages/session/message-timeline.tsx

@@ -366,7 +366,10 @@ export function MessageTimeline(props: {
           }}
           onClick={props.onAutoScrollInteraction}
           class="relative min-w-0 w-full h-full overflow-y-auto session-scroller"
-          style={{ "--session-title-height": showHeader() ? "40px" : "0px" }}
+          style={{
+            "--session-title-height": showHeader() ? "40px" : "0px",
+            "--sticky-accordion-top": showHeader() ? "64px" : "0px",
+          }}
         >
           <Show when={showHeader()}>
             <div

packages/ui/src/components/collapsible.css

@@ -6,7 +6,7 @@
   border: none;
   transition: background-color 0.15s ease;
   border-radius: var(--radius-md);
-  overflow: clip;
+  overflow: visible;
 
   &.tool-collapsible {
     gap: 8px;
@@ -82,6 +82,10 @@
     overflow: hidden;
     /* animation: slideUp 250ms ease-out; */
 
+    &[data-expanded] {
+      overflow: visible;
+    }
+
     /* &[data-expanded] { */
     /*   animation: slideDown 250ms ease-out; */
     /* } */

packages/ui/src/components/message-part.css

@@ -1288,7 +1288,6 @@
 }
 
 [data-component="apply-patch-file-diff"] {
-  max-height: 420px;
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;

packages/ui/src/components/message-part.tsx

@@ -36,6 +36,7 @@ import { useI18n } from "../context/i18n"
 import { BasicTool } from "./basic-tool"
 import { GenericTool } from "./basic-tool"
 import { Accordion } from "./accordion"
+import { StickyAccordionHeader } from "./sticky-accordion-header"
 import { Button } from "./button"
 import { Card } from "./card"
 import { Collapsible } from "./collapsible"
@@ -1645,7 +1646,7 @@ ToolRegistry.register({
 
                 return (
                   <Accordion.Item value={file.filePath} data-type={file.type}>
-                    <Accordion.Header>
+                    <StickyAccordionHeader>
                       <Accordion.Trigger>
                         <div data-slot="apply-patch-trigger-content">
                           <div data-slot="apply-patch-file-info">
@@ -1682,7 +1683,7 @@ ToolRegistry.register({
                           </div>
                         </div>
                       </Accordion.Trigger>
-                    </Accordion.Header>
+                    </StickyAccordionHeader>
                     <Accordion.Content>
                       <Show when={visible()}>
                         <div data-component="apply-patch-file-diff">

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

@@ -187,7 +187,6 @@
     background-color: var(--surface-inset-base);
     width: 100%;
     min-width: 0;
-    max-height: 420px;
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;

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

@@ -9,6 +9,7 @@ import { Dynamic } from "solid-js/web"
 import { AssistantParts, Message } from "./message-part"
 import { Card } from "./card"
 import { Accordion } from "./accordion"
+import { StickyAccordionHeader } from "./sticky-accordion-header"
 import { Collapsible } from "./collapsible"
 import { DiffChanges } from "./diff-changes"
 import { Icon } from "./icon"
@@ -345,7 +346,7 @@ export function SessionTurn(
 
                                   return (
                                     <Accordion.Item value={diff.file}>
-                                      <Accordion.Header>
+                                      <StickyAccordionHeader>
                                         <Accordion.Trigger>
                                           <div data-slot="session-turn-diff-trigger">
                                             <span data-slot="session-turn-diff-path">
@@ -368,7 +369,7 @@ export function SessionTurn(
                                             </div>
                                           </div>
                                         </Accordion.Trigger>
-                                      </Accordion.Header>
+                                      </StickyAccordionHeader>
                                       <Accordion.Content>
                                         <Show when={visible()}>
                                           <div data-slot="session-turn-diff-view" data-scrollable>

packages/ui/src/components/sticky-accordion-header.css

@@ -5,7 +5,7 @@
 }
 
 [data-slot="accordion-item"]:first-child [data-component="sticky-accordion-header"] {
-  background-color: var(--background-base);
+  background-color: var(--background-stronger);
 }
 
 [data-component="sticky-accordion-header"][data-expanded],