fix(app): accordion styles

Author: adamdotdevin

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] {
-      [data-slot="accordion-trigger"] {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+    &:first-child {
+      [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+        border-top-left-radius: var(--radius-lg);
+        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-bottom-left-radius: var(--radius-md);
-        border-bottom-right-radius: var(--radius-md);
+        border-top: 0;
+        background-color: var(--background-stronger);
+      }
+    }
+
+    &: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,70 +58,13 @@
   }
 
   [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]
-      [data-slot="accordion-header"]
-      [data-slot="accordion-trigger"] {
-      background-color: var(--surface-base-active);
-    }
+  [data-slot="session-review-accordion-item"][data-selected]
+    [data-slot="accordion-header"]
+    [data-slot="accordion-trigger"] {
+    background-color: var(--surface-base-active);
   }
 
   [data-slot="accordion-item"] {