chore(app): more spacing controls

adamdotdevin · adamdotdevin · commit af2ccc94ebc6 · 2026-03-27T11:22:28.000-05:00
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
@@ -9,7 +9,8 @@
   overflow: visible;
 
   &.tool-collapsible {
-    gap: 8px;
+    --tool-content-gap: 8px;
+    gap: var(--tool-content-gap);
   }
 
   [data-slot="collapsible-trigger"] {
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
@@ -636,14 +636,17 @@
 }
 
 [data-component="context-tool-group-list"] {
-  padding: 6px 0 4px 0;
+  padding-top: 6px;
+  padding-right: 0;
+  padding-bottom: 4px;
+  padding-left: 13px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 8px;
 
   [data-slot="context-tool-group-item"] {
     min-width: 0;
-    padding: 6px 0;
+    padding: 0;
   }
 }
 
@@ -1154,8 +1157,8 @@
     position: sticky;
     top: var(--sticky-accordion-top, 0px);
     z-index: 20;
-    height: 40px;
-    padding-bottom: 8px;
+    height: calc(32px + var(--tool-content-gap));
+    padding-bottom: var(--tool-content-gap);
     background-color: var(--background-stronger);
   }
 }
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
@@ -790,7 +790,7 @@ function ContextToolGroup(props: { parts: ToolPart[]; busy?: boolean }) {
   const summary = createMemo(() => contextToolSummary(props.parts))
 
   return (
-    <Collapsible open={open()} onOpenChange={setOpen} variant="ghost">
+    <Collapsible open={open()} onOpenChange={setOpen} variant="ghost" class="tool-collapsible">
       <Collapsible.Trigger>
         <div data-component="context-tool-group-trigger">
           <span
diff --git a/packages/ui/src/components/timeline-playground.stories.tsx b/packages/ui/src/components/timeline-playground.stories.tsx
@@ -567,6 +567,7 @@ function compactionPart(): CompactionPart {
 const MD = "markdown.css"
 const MP = "message-part.css"
 const ST = "session-turn.css"
+const CL = "collapsible.css"
 
 /**
  * Source mapping for a CSS control.
@@ -1039,6 +1040,48 @@ const CSS_CONTROLS: CSSControl[] = [
   },
 
   // --- Tool parts ---
+  {
+    key: "tool-content-gap",
+    label: "Trigger/content gap",
+    group: "Tool Parts",
+    type: "range",
+    initial: "8",
+    selector: '[data-component="collapsible"].tool-collapsible',
+    property: "--tool-content-gap",
+    min: "0",
+    max: "24",
+    step: "1",
+    unit: "px",
+    source: { file: CL, anchor: "&.tool-collapsible {", prop: "--tool-content-gap", format: px },
+  },
+  {
+    key: "context-tool-gap",
+    label: "Explored tool gap",
+    group: "Explored Group",
+    type: "range",
+    initial: "14",
+    selector: '[data-component="context-tool-group-list"]',
+    property: "gap",
+    min: "0",
+    max: "40",
+    step: "1",
+    unit: "px",
+    source: { file: MP, anchor: '[data-component="context-tool-group-list"]', prop: "gap", format: px },
+  },
+  {
+    key: "context-tool-indent",
+    label: "Explored indent",
+    group: "Explored Group",
+    type: "range",
+    initial: "0",
+    selector: '[data-component="context-tool-group-list"]',
+    property: "padding-left",
+    min: "0",
+    max: "48",
+    step: "1",
+    unit: "px",
+    source: { file: MP, anchor: '[data-component="context-tool-group-list"]', prop: "padding-left", format: px },
+  },
   {
     key: "bash-max-height",
     label: "Shell output max-height",
@@ -1099,8 +1142,9 @@ function Playground() {
       const el = (root.querySelector(sample(ctrl)) ?? root.querySelector(ctrl.selector)) as HTMLElement | null
       if (!el) continue
       const styles = getComputedStyle(el)
-      // Use bracket access — getPropertyValue doesn't resolve shorthands
-      const raw = (styles as any)[ctrl.property] as string
+      const raw = ctrl.property.startsWith("--")
+        ? styles.getPropertyValue(ctrl.property).trim()
+        : ((styles as any)[ctrl.property] as string)
       if (!raw) continue
       // Shorthands may return "24px 0px" — take the first value
       const num = parseFloat(raw.split(" ")[0])

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,8 @@`
`9`	`9`	`overflow: visible;`
`10`	`10`
`11`	`11`	`&.tool-collapsible {`
`12`		`- gap: 8px;`
	`12`	`+ --tool-content-gap: 8px;`
	`13`	`+ gap: var(--tool-content-gap);`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`[data-slot="collapsible-trigger"] {`
Original file line number	Diff line number	Diff line change
`@@ -636,14 +636,17 @@`
`636`	`636`	`}`
`637`	`637`
`638`	`638`	`[data-component="context-tool-group-list"] {`
`639`		`- padding: 6px 0 4px 0;`
	`639`	`+ padding-top: 6px;`
	`640`	`+ padding-right: 0;`
	`641`	`+ padding-bottom: 4px;`
	`642`	`+ padding-left: 13px;`
`640`	`643`	`display: flex;`
`641`	`644`	`flex-direction: column;`
`642`		`- gap: 2px;`
	`645`	`+ gap: 8px;`
`643`	`646`
`644`	`647`	`[data-slot="context-tool-group-item"] {`
`645`	`648`	`min-width: 0;`
`646`		`- padding: 6px 0;`
	`649`	`+ padding: 0;`
`647`	`650`	`}`
`648`	`651`	`}`
`649`	`652`
`@@ -1154,8 +1157,8 @@`
`1154`	`1157`	`position: sticky;`
`1155`	`1158`	`top: var(--sticky-accordion-top, 0px);`
`1156`	`1159`	`z-index: 20;`
`1157`		`- height: 40px;`
`1158`		`- padding-bottom: 8px;`
	`1160`	`+ height: calc(32px + var(--tool-content-gap));`
	`1161`	`+ padding-bottom: var(--tool-content-gap);`
`1159`	`1162`	`background-color: var(--background-stronger);`
`1160`	`1163`	`}`
`1161`	`1164`	`}`