fix(app): accordion styles

packages/ui/src/components/accordion.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 8px;
+  gap: 0px;
   align-self: stretch;
 
   [data-slot="accordion-item"] {
@@ -11,7 +11,11 @@
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
-    overflow: clip;
+    overflow: visible;
+
+    & + [data-slot="accordion-item"] {
+      margin-top: -1px;
+    }
 
     [data-slot="accordion-header"] {
       width: 100%;
@@ -31,9 +35,10 @@
         cursor: default;
         user-select: none;
 
-        background-color: var(--surface-base);
+        background-color: var(--background-stronger);
         border: 1px solid var(--border-weak-base);
-        border-radius: var(--radius-md);
+        border-radius: 0;
+        box-shadow: none;
         overflow: clip;
         color: var(--text-strong);
         transition: background-color 0.15s ease;
@@ -47,7 +52,10 @@
         letter-spacing: var(--letter-spacing-normal);
 
         &:hover {
-          background-color: var(--surface-base);
+          background-color: var(--surface-base-hover);
+        }
+        &:active {
+          background-color: var(--surface-base-active);
         }
         &:focus-visible {
           outline: none;
@@ -58,23 +66,40 @@
       }
     }
 
-    &[data-expanded] {
+    &:first-child {
-      [data-slot="accordion-trigger"] {
+      [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
-        border-bottom-left-radius: 0;
+        border-top-left-radius: var(--radius-lg);
-        border-bottom-right-radius: 0;
+        border-top-right-radius: var(--radius-lg);
+      }
     }
 
+    &:last-child:not([data-expanded]) {
+      [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+        border-bottom-left-radius: var(--radius-lg);
+        border-bottom-right-radius: var(--radius-lg);
+      }
+    }
+
+    &[data-expanded] {
       [data-slot="accordion-content"] {
         border: 1px solid var(--border-weak-base);
-        border-top: none;
+        border-top: 0;
-        border-bottom-left-radius: var(--radius-md);
+        background-color: var(--background-stronger);
-        border-bottom-right-radius: var(--radius-md);
+      }
+    }
+
+    &:last-child[data-expanded] {
+      [data-slot="accordion-content"] {
+        border-bottom-left-radius: var(--radius-lg);
+        border-bottom-right-radius: var(--radius-lg);
       }
     }
 
     [data-slot="accordion-content"] {
       overflow: hidden;
       width: 100%;
+      border: 0;
+      background-color: transparent;
     }
   }
 }

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

@@ -1288,7 +1288,6 @@
 }
 
 [data-component="apply-patch-file-diff"] {
-  border-top: 1px solid var(--border-weaker-base);
   max-height: 420px;
   overflow-y: auto;
   scrollbar-width: none;

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

@@ -1,7 +1,7 @@
 [data-component="session-review"] {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0px;
   height: 100%;
   overflow-y: auto;
   scrollbar-width: none;
@@ -19,7 +19,8 @@
     top: 0;
     z-index: 20;
     background-color: var(--background-stronger);
-    height: 32px;
+    height: 40px;
+    padding-bottom: 8px;
     flex-shrink: 0;
     display: flex;
     justify-content: space-between;
@@ -57,63 +58,7 @@
   }
 
   [data-component="sticky-accordion-header"] {
-    top: 40px;
+    --sticky-accordion-top: 40px;
-  }
-
-  [data-component="sticky-accordion-header"][data-expanded]::before,
-  [data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before {
-    top: -40px;
-  }
-
-  [data-slot="session-review-diffs-group"] {
-    background-color: var(--background-stronger);
-    border-radius: var(--radius-lg);
-    border: 1px solid var(--border-weak-base);
-    overflow: clip;
-
-    [data-component="accordion"] {
-      gap: 0;
-    }
-
-    [data-component="accordion"] [data-slot="accordion-item"] {
-      overflow: visible;
-    }
-
-    [data-component="accordion"]
-      [data-slot="accordion-item"]
-      [data-slot="accordion-header"]
-      [data-slot="accordion-trigger"] {
-      border: 0;
-      border-radius: 0;
-      box-shadow: none;
-      background-color: transparent;
-
-      &:hover {
-        background-color: var(--surface-base-hover);
-      }
-
-      &:active {
-        background-color: var(--surface-base-active);
-      }
-    }
-
-    [data-component="accordion"]
-      [data-slot="accordion-item"]
-      + [data-slot="accordion-item"]
-      [data-slot="accordion-header"]
-      [data-slot="accordion-trigger"] {
-      border-top: 1px solid var(--border-weak-base);
-    }
-
-    [data-component="accordion"] [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
-      border: 0;
-      border-top: 1px solid var(--border-weak-base);
-      border-radius: 0;
-    }
-
-    [data-component="sticky-accordion-header"][data-expanded]::before,
-    [data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before {
-      top: 0;
   }
 
   [data-slot="session-review-accordion-item"][data-selected]
@@ -121,7 +66,6 @@
     [data-slot="accordion-trigger"] {
     background-color: var(--surface-base-active);
   }
-  }
 
   [data-slot="accordion-item"] {
     [data-slot="accordion-content"] {

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

@@ -320,7 +320,6 @@ export const SessionReview = (props: SessionReviewProps) => {
       </div>
       <div data-slot="session-review-container" class={props.classes?.container}>
         <Show when={hasDiffs()} fallback={props.empty}>
-          <div data-slot="session-review-diffs-group">
           <Accordion multiple value={open()} onChange={handleChange}>
             <For each={props.diffs}>
               {(diff) => {
@@ -708,7 +707,6 @@ export const SessionReview = (props: SessionReviewProps) => {
               }}
             </For>
           </Accordion>
-          </div>
         </Show>
       </div>
     </div>

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

@@ -129,49 +129,6 @@
     flex-direction: column;
   }
 
-  [data-slot="session-turn-diffs-group"] {
-    background-color: var(--background-stronger);
-    border-radius: var(--radius-lg);
-    border: 1px solid var(--border-weak-base);
-    overflow: clip;
-
-    [data-component="accordion"] {
-      gap: 0;
-    }
-
-    [data-component="accordion"]
-      [data-slot="accordion-item"]
-      [data-slot="accordion-header"]
-      [data-slot="accordion-trigger"] {
-      border: 0;
-      border-radius: 0;
-      box-shadow: none;
-      background-color: transparent;
-
-      &:hover {
-        background-color: var(--surface-base-hover);
-      }
-
-      &:active {
-        background-color: var(--surface-base-active);
-      }
-    }
-
-    [data-component="accordion"]
-      [data-slot="accordion-item"]
-      + [data-slot="accordion-item"]
-      [data-slot="accordion-header"]
-      [data-slot="accordion-trigger"] {
-      border-top: 1px solid var(--border-weak-base);
-    }
-
-    [data-component="accordion"] [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
-      border: 0;
-      border-top: 1px solid var(--border-weak-base);
-      border-radius: 0;
-    }
-  }
-
   [data-slot="session-turn-diff-trigger"] {
     display: flex;
     align-items: center;

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

@@ -315,7 +315,6 @@ export function SessionTurn(
                       <Collapsible.Content>
                         <Show when={open()}>
                           <div data-component="session-turn-diffs-content">
-                            <div data-slot="session-turn-diffs-group">
                             <Accordion
                               multiple
                               value={expanded()}
@@ -387,7 +386,6 @@ export function SessionTurn(
                               </For>
                             </Accordion>
                           </div>
-                          </div>
                         </Show>
                       </Collapsible.Content>
                     </Collapsible>

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

@@ -1,18 +1,14 @@
 [data-component="sticky-accordion-header"] {
+  --sticky-accordion-top: 0px;
   position: sticky;
-  top: 0px;
+  top: var(--sticky-accordion-top);
+}
+
+[data-slot="accordion-item"]:first-child [data-component="sticky-accordion-header"] {
+  background-color: var(--background-base);
 }
 
 [data-component="sticky-accordion-header"][data-expanded],
 [data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"] {
   z-index: 10;
 }
-
-[data-component="sticky-accordion-header"][data-expanded]::before,
-[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"]::before {
-  content: "";
-  z-index: -10;
-  position: absolute;
-  inset: 0;
-  background-color: var(--background-stronger);
-}