feat: animate queue detail expansion and collapse

src/styles-workflows.css

@@ -341,6 +341,10 @@
     background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
 }
 
+.queue-details-toggle svg {
+    transition: transform 220ms ease;
+}
+
 .queue-details-toggle[aria-expanded="true"] svg {
     transform: rotate(180deg);
 }
@@ -363,21 +367,33 @@
 }
 
 .queue-details {
-    display: none;
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition: grid-template-rows 220ms ease, opacity 180ms ease;
     font-size: 12px;
     line-height: 18px;
     color: var(--text-secondary);
-    margin-top: 8px;
-    padding: 8px 0 2px;
-    border-top: 1px solid var(--border-soft);
     overflow-wrap: anywhere;
 }
 
-.queue-details.expanded {
-    display: block;
+.queue-details-clip {
+    min-height: 0;
+    overflow: hidden;
 }
 
-.queue-details div {
+.queue-details-content {
+    margin-top: 8px;
+    padding: 8px 0 2px;
+    border-top: 1px solid var(--border-soft);
+}
+
+.queue-details.expanded {
+    grid-template-rows: 1fr;
+    opacity: 1;
+}
+
+.queue-details-content > div {
     margin-bottom: 2px;
 }