revert(app): "STUPID SEXY TIMELINE (#16420)" (#16745)

packages/ui/src/components/collapsible.css

@@ -8,18 +8,14 @@
   border-radius: var(--radius-md);
   overflow: visible;
 
-  &.tool-collapsible [data-slot="collapsible-trigger"] {
-    height: 37px;
-  }
-
-  &.tool-collapsible [data-slot="basic-tool-content-inner"] {
-    padding-top: 0;
+  &.tool-collapsible {
+    gap: 8px;
   }
 
   [data-slot="collapsible-trigger"] {
     width: 100%;
     display: flex;
-    height: 36px;
+    height: 32px;
     padding: 0;
     align-items: center;
     align-self: stretch;
@@ -27,17 +23,6 @@
     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;
@@ -65,6 +50,9 @@
     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);
@@ -94,16 +82,16 @@
   }
 
   [data-slot="collapsible-content"] {
-    overflow: clip;
+    overflow: hidden;
+    /* animation: slideUp 250ms ease-out; */
 
     &[data-expanded] {
       overflow: visible;
     }
 
-    /* JS-animated content: overflow managed by animate() */
-    &[data-spring-content] {
-      overflow: clip;
-    }
+    /* &[data-expanded] { */
+    /*   animation: slideDown 250ms ease-out; */
+    /* } */
   }
 
   &[data-variant="ghost"] {
@@ -115,6 +103,9 @@
       border: none;
       padding: 0;
 
+      /* &:hover { */
+      /*   color: var(--text-strong); */
+      /* } */
       &:focus-visible {
         outline: none;
         background-color: var(--surface-raised-base-hover);
@@ -131,3 +122,21 @@
     }
   }
 }
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}