fix(app): don't jump accordion on expand/collapse

1 files changed, 4 insertions, 64 deletions

diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
index 5724307cd..7bf287fe5 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/components/accordion.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0px;
+  gap: 8px;
   align-self: stretch;
 
   [data-slot="accordion-item"] {
@@ -10,7 +10,6 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0px;
     align-self: stretch;
     overflow: clip;
 
@@ -34,6 +33,7 @@
 
         background-color: var(--surface-base);
         border: 1px solid var(--border-weak-base);
+        border-radius: var(--radius-md);
         overflow: clip;
         color: var(--text-strong);
         transition: background-color 0.15s ease;
@@ -59,12 +59,9 @@
     }
 
     &[data-expanded] {
-      margin-top: 8px;
-      margin-bottom: 8px;
-
       [data-slot="accordion-trigger"] {
-        border-top-left-radius: var(--radius-md);
-        border-top-right-radius: var(--radius-md);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
       }
 
       [data-slot="accordion-content"] {
@@ -73,68 +70,11 @@
         border-bottom-left-radius: var(--radius-md);
         border-bottom-right-radius: var(--radius-md);
       }
-
-      & + [data-slot="accordion-item"] {
-        margin-top: 8px;
-
-        [data-slot="accordion-trigger"] {
-          border-top-left-radius: var(--radius-md);
-          border-top-right-radius: var(--radius-md);
-        }
-      }
-    }
-
-    &:has(+ [data-slot="accordion-item"][data-expanded]) {
-      margin-bottom: 8px;
-
-      &[data-closed] {
-        border-bottom-left-radius: var(--radius-md);
-        border-bottom-right-radius: var(--radius-md);
-
-        [data-slot="accordion-trigger"] {
-          border-bottom-left-radius: var(--radius-md);
-          border-bottom-right-radius: var(--radius-md);
-        }
-      }
-    }
-
-    &[data-closed] + &[data-closed] {
-      [data-slot="accordion-trigger"] {
-        border-top: none;
-      }
-    }
-
-    &:first-child {
-      margin-top: 0px;
-
-      &[data-closed] {
-        [data-slot="accordion-trigger"] {
-          border-top-left-radius: var(--radius-md);
-          border-top-right-radius: var(--radius-md);
-        }
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0px;
-
-      &[data-closed] {
-        [data-slot="accordion-trigger"] {
-          border-bottom-left-radius: var(--radius-md);
-          border-bottom-right-radius: var(--radius-md);
-        }
-      }
     }
 
     [data-slot="accordion-content"] {
       overflow: hidden;
       width: 100%;
-
-      /* animation: slideUp 250ms cubic-bezier(0.87, 0, 0.13, 1); */
-      /**/
-      /* &[data-expanded] { */
-      /*   animation: slideDown 250ms cubic-bezier(0.87, 0, 0.13, 1); */
-      /* } */
     }
   }
 }