STUPID SEXY TIMELINE (#16420)

1 files changed, 23 insertions, 32 deletions

diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index bab2c4f92..1a86338bd 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -8,14 +8,18 @@
   border-radius: var(--radius-md);
   overflow: visible;
 
-  &.tool-collapsible {
-    gap: 8px;
+  &.tool-collapsible [data-slot="collapsible-trigger"] {
+    height: 37px;
+  }
+
+  &.tool-collapsible [data-slot="basic-tool-content-inner"] {
+    padding-top: 0;
   }
 
   [data-slot="collapsible-trigger"] {
     width: 100%;
     display: flex;
-    height: 32px;
+    height: 36px;
     padding: 0;
     align-items: center;
     align-self: stretch;
@@ -23,6 +27,17 @@
     user-select: none;
     color: var(--text-base);
 
+    > [data-component="tool-trigger"][data-arrow] {
+      width: auto;
+      max-width: 100%;
+      flex: 0 1 auto;
+
+      [data-slot="basic-tool-tool-trigger-content"] {
+        width: auto;
+        max-width: 100%;
+      }
+    }
+
     [data-slot="collapsible-arrow"] {
       opacity: 0;
       transition: opacity 0.15s ease;
@@ -50,9 +65,6 @@
     line-height: var(--line-height-large); /* 166.667% */
     letter-spacing: var(--letter-spacing-normal);
 
-    /* &:hover { */
-    /*   background-color: var(--surface-base); */
-    /* } */
     &:focus-visible {
       outline: none;
       background-color: var(--surface-raised-base-hover);
@@ -82,16 +94,16 @@
   }
 
   [data-slot="collapsible-content"] {
-    overflow: hidden;
-    /* animation: slideUp 250ms ease-out; */
+    overflow: clip;
 
     &[data-expanded] {
       overflow: visible;
     }
 
-    /* &[data-expanded] { */
-    /*   animation: slideDown 250ms ease-out; */
-    /* } */
+    /* JS-animated content: overflow managed by animate() */
+    &[data-spring-content] {
+      overflow: clip;
+    }
   }
 
   &[data-variant="ghost"] {
@@ -103,9 +115,6 @@
       border: none;
       padding: 0;
 
-      /* &:hover { */
-      /*   color: var(--text-strong); */
-      /* } */
       &:focus-visible {
         outline: none;
         background-color: var(--surface-raised-base-hover);
@@ -122,21 +131,3 @@
     }
   }
 }
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-collapsible-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}