feat(desktop): sticky diff headers

2 files changed, 25 insertions, 17 deletions

diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
index 5524838bc..f949dc948 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/components/accordion.css
@@ -12,9 +12,6 @@
     align-items: flex-start;
     gap: 0px;
     align-self: stretch;
-    border: 1px solid var(--border-weak-base);
-    border-bottom: none;
-    border-top: none;
     overflow: clip;
 
     [data-slot="accordion-header"] {
@@ -36,7 +33,7 @@
         user-select: none;
 
         background-color: var(--surface-base);
-        border-bottom: 1px solid var(--border-weak-base);
+        border: 1px solid var(--border-weak-base);
         overflow: clip;
         color: var(--text-strong);
         transition: background-color 0.15s ease;
@@ -62,11 +59,19 @@
     }
 
     &[data-expanded] {
-      border: 1px solid var(--border-weak-base);
-      border-bottom: 1px solid var(--border-weak-base);
       margin-top: 8px;
       margin-bottom: 8px;
-      border-radius: 8px;
+
+      [data-slot="accordion-trigger"] {
+        border-radius: 8px 8px 0 0;
+      }
+
+      [data-slot="accordion-content"] {
+        border: 1px solid var(--border-weak-base);
+        border-top: none;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
 
       [data-slot="accordion-item"]:has(+ &) {
         &[data-closed] {
@@ -81,18 +86,23 @@
       }
 
       & + [data-slot="accordion-item"] {
-        border-top: 1px solid var(--border-weak-base);
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
         margin-top: 8px;
+
+        [data-slot="accordion-trigger"] {
+          border-top-left-radius: 8px;
+          border-top-right-radius: 8px;
+        }
+      }
+    }
+
+    &[data-closed] + &[data-closed] {
+      [data-slot="accordion-trigger"] {
+        border-top: none;
       }
     }
 
     &:first-child {
       margin-top: 0px;
-      border-top: 1px solid var(--border-weak-base);
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
 
       &[data-closed] {
         [data-slot="accordion-trigger"] {
@@ -104,8 +114,6 @@
 
     &:last-child {
       margin-bottom: 0px;
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
 
       &[data-closed] {
         [data-slot="accordion-trigger"] {
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index f6511e312..05164092e 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -77,7 +77,7 @@
   --background-weak: var(--smoke-light-3);
   --background-strong: var(--smoke-light-1);
   --background-stronger: #fcfcfc;
-  --surface-base: var(--smoke-light-alpha-2);
+  --surface-base: var(--smoke-light-3);
   --base: var(--smoke-light-alpha-2);
   --surface-base-hover: #0500000f;
   --surface-base-active: var(--smoke-light-alpha-3);
@@ -317,7 +317,7 @@
     --background-weak: #1b1818;
     --background-strong: #151313;
     --background-stronger: #191515;
-    --surface-base: var(--smoke-dark-alpha-2);
+    --surface-base: var(--smoke-dark-3);
     --base: var(--smoke-dark-alpha-2);
     --surface-base-hover: #e0b7b716;
     --surface-base-active: var(--smoke-dark-alpha-3);