@mcp-b/react-components 0.16.0 → 0.17.0

package/dist/styles/recipes.css

@@ -4,10 +4,10 @@
  * supported variation. Consumers can override these variables by inheritance.
  */
 :where(:root, [data-theme="light"], [data-theme="dark"]) {
-  --sigvelo-recipe-control-height: var(--sigvelo-control-height-md);
-  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-3);
-  --sigvelo-recipe-control-gap: var(--sigvelo-spacing-2);
-  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-md);
+  --sigvelo-recipe-control-height: var(--sigvelo-control-height-sm);
+  --sigvelo-recipe-control-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-control-gap: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-control-font-size: var(--sigvelo-control-text-sm);
   --sigvelo-recipe-control-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-field-background: var(--sigvelo-color-canvas);
   --sigvelo-recipe-field-border: var(--sigvelo-color-neutral-border-muted);
@@ -25,12 +25,94 @@
   --sigvelo-recipe-surface-radius: var(--sigvelo-radius-md);
   --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-lg);
   --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
+  --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xs);
+  --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-0-5);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-row-font-size: var(--sigvelo-text-compact);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-1-5);
+  --sigvelo-recipe-group-label-padding-inline: var(--sigvelo-recipe-row-padding-inline);
+  --sigvelo-recipe-group-label-color: var(--sigvelo-color-text-muted);
+  --sigvelo-recipe-group-label-font-size: var(--sigvelo-text-xs);
+  --sigvelo-recipe-group-label-font-weight: var(--sigvelo-font-weight-semibold);
+  --sigvelo-recipe-group-label-line-height: inherit;
+}
+
+/*
+ * Composer add and command pickers share a slightly roomier hierarchy than
+ * general-purpose menus while continuing to inherit the surface and row
+ * recipes for their actual anatomy and interaction states.
+ */
+:where([data-recipe~="composer-command-surface"]) {
+  --sigvelo-recipe-surface-radius: var(--sigvelo-radius-xl);
+  --sigvelo-recipe-surface-shadow: var(--sigvelo-shadow-xl);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-1);
   --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-sm);
   --sigvelo-recipe-row-padding-block: var(--sigvelo-spacing-1);
-  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-3);
-  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-row-gap: var(--sigvelo-spacing-2-5);
   --sigvelo-recipe-row-font-size: var(--sigvelo-text-sm);
-  --sigvelo-recipe-row-radius: var(--sigvelo-radius-sm);
+  --sigvelo-recipe-row-radius: var(--sigvelo-radius-md);
+  --sigvelo-recipe-group-label-padding-block: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-group-label-padding-inline: var(--sigvelo-spacing-2);
+  --sigvelo-recipe-group-label-font-size: var(--sigvelo-text-sm);
+  --sigvelo-recipe-group-label-font-weight: var(--sigvelo-font-weight-normal);
+  --sigvelo-recipe-group-label-line-height: var(--sigvelo-leading-tight);
+  --sigvelo-combobox-popup-padding: var(--sigvelo-spacing-1);
+}
+
+/* Shared application compositions opt in explicitly; component CSS continues
+   to own their headers, rows, controls, and semantic states. */
+:where([data-recipe~="wide-scroll-picker"]) {
+  inline-size: min(46rem, calc(100dvw - 1rem));
+  max-block-size: min(28rem, calc(100dvh - 2rem));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+:where([data-recipe~="framed-panel"]) {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  overflow: hidden;
+  font-family: inherit;
+  color: var(--sigvelo-color-text);
+  background-color: var(--sigvelo-color-surface);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-subtle);
+  border-radius: var(--sigvelo-radius-md);
+}
+
+:where([data-recipe~="disclosure-stack"]) {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  font-family: inherit;
+  color: var(--sigvelo-color-text);
+}
+
+@media (any-pointer: coarse) {
+  :where(:root, [data-theme="light"], [data-theme="dark"]) {
+    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
+  }
+
+  :where(
+    [data-slot="input"],
+    [data-slot="select-trigger"],
+    [data-slot="combobox-input"],
+    [data-slot="autocomplete-input"],
+    [data-slot="field-control"],
+    [data-slot="number-field-input"],
+    [data-slot="toolbar-input"]
+  ) {
+    block-size: var(--sigvelo-control-height-xl);
+  }
+
+  :where([data-recipe~="composer-command-surface"]) {
+    --sigvelo-recipe-row-min-height: var(--sigvelo-control-height-xl);
+  }
 }
 
 :where(
@@ -233,6 +315,50 @@
   opacity: var(--sigvelo-recipe-disabled-opacity);
 }
 
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"]) {
+  inline-size: var(--sigvelo-spacing-3);
+  block-size: var(--sigvelo-spacing-3);
+  background-color: var(--sigvelo-color-canvas);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
+  transform: rotate(45deg);
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="top"] {
+  border-block-start: none;
+  border-inline-start: none;
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="bottom"] {
+  border-block-end: none;
+  border-inline-end: none;
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="left"] {
+  border-block-end: none;
+  border-inline-start: none;
+}
+
+:where([data-slot="dropdown-menu-arrow"], [data-slot="popover-arrow"])[data-side="right"] {
+  border-block-start: none;
+  border-inline-end: none;
+}
+
+:where([data-slot="context-menu-item-indicator"], [data-slot="menubar-item-indicator"]) {
+  display: inline-flex;
+  flex: 0 0 1rem;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1rem;
+}
+
+:where([data-slot="popover-description"], [data-slot="toast-description"]) {
+  margin: 0;
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-normal);
+}
+
 :where([data-slot="dropdown-menu-trigger"]:not([data-unstyled]), [data-slot="popover-trigger"]) {
   display: inline-flex;
   align-items: center;
@@ -428,11 +554,12 @@
   [data-slot="combobox-group-label"],
   [data-slot="autocomplete-group-label"]
 ) {
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-recipe-row-padding-inline);
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-xs);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  padding-block: var(--sigvelo-recipe-group-label-padding-block);
+  padding-inline: var(--sigvelo-recipe-group-label-padding-inline);
+  color: var(--sigvelo-recipe-group-label-color);
+  font-size: var(--sigvelo-recipe-group-label-font-size);
+  font-weight: var(--sigvelo-recipe-group-label-font-weight);
+  line-height: var(--sigvelo-recipe-group-label-line-height);
 }
 
 :where(

package/dist/styles/responsive-sidebar-shell.css

@@ -59,11 +59,13 @@
   z-index: 25;
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] {
+.responsive-sidebar-shell[data-sidebar-open="false"] > .responsive-sidebar-shell__frame {
   grid-template-columns: minmax(0, 1fr);
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__sidebar {
+.responsive-sidebar-shell[data-sidebar-open="false"]
+  > .responsive-sidebar-shell__frame
+  > .responsive-sidebar-shell__sidebar {
   position: absolute;
   inset-block: 0;
   inset-inline-start: 0;
@@ -72,7 +74,9 @@
   pointer-events: none;
 }
 
-.responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__main {
+.responsive-sidebar-shell[data-sidebar-open="false"]
+  > .responsive-sidebar-shell__frame
+  > .responsive-sidebar-shell__main {
   grid-column: 1;
 }
 
@@ -110,24 +114,13 @@
       transform var(--sigvelo-duration-medium) var(--sigvelo-ease-emphasized);
   }
 
-  .responsive-sidebar-shell__sidebar > .think-thread-picker {
-    block-size: auto;
-    max-block-size: inherit;
-    grid-template-rows: auto auto auto;
-  }
-
-  .responsive-sidebar-shell__sidebar .think-thread-picker__nav,
-  .responsive-sidebar-shell__sidebar .think-thread-picker__scroll,
-  .responsive-sidebar-shell__sidebar .think-thread-picker__viewport {
-    block-size: auto;
-    max-block-size: 20rem;
-  }
-
   .responsive-sidebar-shell__resizer {
     display: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="false"] .responsive-sidebar-shell__sidebar {
+  .responsive-sidebar-shell[data-sidebar-open="false"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__sidebar {
     visibility: hidden;
     opacity: 0;
     transform: translate(-50%, calc(var(--sigvelo-spacing-2) * -1)) scale(0.98);
@@ -137,11 +130,15 @@
     transition: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__main {
+  .responsive-sidebar-shell[data-sidebar-open="true"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__main {
     pointer-events: none;
   }
 
-  .responsive-sidebar-shell__frame[data-sidebar-open="true"] .responsive-sidebar-shell__peek {
+  .responsive-sidebar-shell[data-sidebar-open="true"]
+    > .responsive-sidebar-shell__frame
+    > .responsive-sidebar-shell__peek {
     position: absolute;
     inset-block: 0;
     inset-inline: 0;

package/dist/styles/select.css

@@ -58,8 +58,8 @@
 }
 
 .select__option[data-selected] {
-  background-color: var(--sigvelo-color-primary-bg);
-  color: var(--sigvelo-color-primary-text-on-bg);
+  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
 .select__item-indicator {
@@ -77,7 +77,7 @@
 }
 
 .select__group-label {
-  padding-block: 0.5rem 0.25rem;
+  padding-block: var(--sigvelo-spacing-1-5) var(--sigvelo-spacing-0-5);
 }
 
 .select__scroll-button {

package/dist/styles/sources.css

@@ -1,11 +1,3 @@
-.sources {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .sources__trigger-label {
   display: inline-flex;
   align-items: center;
@@ -14,9 +6,9 @@
 .sources__list {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-1-5);
+  gap: var(--sigvelo-spacing-1);
   margin: 0;
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 0;
   list-style: none;
 }
@@ -28,9 +20,9 @@
 .sources__link {
   display: flex;
   align-items: flex-start;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-2);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -67,7 +59,7 @@
 }
 
 .sources__link-title {
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   overflow: hidden;

package/dist/styles/subagent-run.css

@@ -1,33 +1,3 @@
-.subagent-run {
-  display: inline-flex;
-  flex-direction: column;
-  max-inline-size: 100%;
-  color: var(--sigvelo-color-text);
-  font-family: inherit;
-}
-
-.subagent-run__trigger {
-  align-items: safe center;
-  justify-content: flex-start;
-  max-inline-size: 18rem;
-  border-radius: var(--sigvelo-radius-full);
-  text-align: start;
-}
-
-.subagent-run__trigger[data-panel-open] {
-  border-color: var(--sigvelo-color-neutral-border-muted);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
-}
-
-.subagent-run__trigger-content {
-  display: flex;
-  align-items: stretch;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 0;
-  min-inline-size: 0;
-}
-
 .subagent-run__selector {
   max-inline-size: 14rem;
   justify-content: flex-start;
@@ -55,14 +25,22 @@
   min-inline-size: 0;
 }
 
-.subagent-run__heading {
-  display: flex;
-  align-items: safe center;
-  flex-wrap: nowrap;
+.subagent-run__list--adjacent {
+  margin-block-start: var(--sigvelo-spacing-2);
+}
+
+.subagent-run__tray {
+  display: grid;
   gap: var(--sigvelo-spacing-1-5);
   min-inline-size: 0;
 }
 
+.subagent-run__tray-label {
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: 1.4;
+}
+
 .subagent-run__title {
   min-inline-size: 0;
   overflow: hidden;
@@ -99,38 +77,6 @@
   color: var(--sigvelo-color-warning-text);
 }
 
-.subagent-run__description {
-  display: block;
-  overflow: hidden;
-  color: var(--sigvelo-color-text-muted);
-  font-size: var(--sigvelo-text-compact);
-  line-height: 1.5;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.subagent-run__description:empty {
-  display: none;
-}
-
-.subagent-run__status {
-  max-inline-size: 100%;
-}
-
-.subagent-run__content-inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
-  min-inline-size: min(30rem, calc(100vw - var(--sigvelo-spacing-8)));
-  margin-block-start: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-lg);
-  background-color: var(--sigvelo-color-surface);
-}
-
 .subagent-run__progress {
   display: grid;
   gap: var(--sigvelo-spacing-1-5);
@@ -191,10 +137,6 @@
 }
 
 @media (forced-colors: active) {
-  .subagent-run__content-inner {
-    border-color: CanvasText;
-  }
-
   .subagent-run__milestone::before {
     border-color: CanvasText;
   }

package/dist/styles/task.css

@@ -1,26 +1,19 @@
-.task {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-}
-
 .task__trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-2);
   /* Ploy-style: hairline outline on the canvas, plain content inside */
   background-color: transparent;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-lg);
+  border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text-muted);
   font-family: inherit;
-  font-size: var(--sigvelo-text-sm);
+  font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
   text-align: start;
   cursor: pointer;
@@ -52,21 +45,13 @@
   display: inline-flex;
 }
 
-.task__trigger-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .task__list {
   display: flex;
   flex-direction: column;
   gap: var(--sigvelo-spacing-1-5);
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 1.5rem;
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   list-style: none;
   /* Bounded so expanding never blows out the conversation scroll position */
   max-height: 20rem;
@@ -75,8 +60,8 @@
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-block-start: none;
-  border-end-start-radius: var(--sigvelo-radius-lg);
-  border-end-end-radius: var(--sigvelo-radius-lg);
+  border-end-start-radius: var(--sigvelo-radius-md);
+  border-end-end-radius: var(--sigvelo-radius-md);
 }
 
 .task__item {
@@ -89,7 +74,7 @@
 .task__item::before {
   content: "";
   position: absolute;
-  inset-inline-start: -0.875rem;
+  inset-inline-start: calc(-1 * var(--sigvelo-spacing-2));
   inset-block-start: var(--sigvelo-spacing-2-5);
   width: 0.3125rem;
   height: 0.3125rem;
@@ -97,6 +82,12 @@
   background-color: var(--sigvelo-color-neutral-border-muted);
 }
 
+@media (any-pointer: coarse) {
+  .task__trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
 .task__file {
   display: inline-flex;
   align-items: center;

package/dist/styles/test-results.css

@@ -1,22 +1,9 @@
-.test-results {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-family: inherit;
-  color: var(--sigvelo-color-text);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  border-radius: var(--sigvelo-radius-md);
-  overflow: hidden;
-}
-
 .test-results__header {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: 0.875rem;
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-spacing-3);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -106,10 +93,11 @@
 .test-results__suite-trigger {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-1-5);
   width: 100%;
-  padding-block: 0.5rem;
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: var(--sigvelo-spacing-0-5);
+  padding-inline: var(--sigvelo-spacing-2);
   background-color: transparent;
   border: none;
   color: var(--sigvelo-color-text);
@@ -174,9 +162,9 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
-  padding-block: 0.4375rem;
-  padding-inline: 1.5rem;
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1-5);
+  padding-inline: var(--sigvelo-spacing-4);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -236,7 +224,13 @@
 
 .test-results__error {
   margin-block-start: var(--sigvelo-spacing-1-5);
-  margin-inline-start: 1.5rem;
+  margin-inline-start: var(--sigvelo-spacing-4);
+}
+
+@media (any-pointer: coarse) {
+  .test-results__suite-trigger {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
 }
 
 .test-results__error-text {

package/dist/styles/textarea.css

@@ -2,7 +2,7 @@
   inline-size: 100%;
   block-size: auto;
   min-block-size: 5rem;
-  padding-block: var(--sigvelo-spacing-2-5);
+  padding-block: var(--sigvelo-spacing-2);
   line-height: var(--sigvelo-leading-relaxed);
 }
 

package/dist/styles/think-execution-workbench.css

@@ -52,7 +52,7 @@
 .think-execution-detail {
   display: grid;
   align-content: start;
-  gap: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-spacing-3);
   min-inline-size: 0;
 }
 
@@ -66,8 +66,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  min-block-size: 3rem;
-  padding-inline: 0.875rem;
+  min-block-size: var(--sigvelo-control-height-lg);
+  padding-inline: var(--sigvelo-spacing-3);
 }
 
 .think-execution-workbench__list-header h3 {
@@ -86,7 +86,7 @@
 
 .think-execution-workbench__list {
   margin: 0;
-  padding: 0.25rem var(--sigvelo-spacing-3) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-1) var(--sigvelo-spacing-2) var(--sigvelo-spacing-2);
   list-style: none;
   display: grid;
 }
@@ -115,12 +115,12 @@
 
 .think-execution-workbench__run {
   min-inline-size: 0;
-  min-block-size: 4.25rem;
+  min-block-size: 3.5rem;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-2-5);
+  gap: var(--sigvelo-spacing-2);
+  padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: 0.25rem;
   border-radius: inherit;
   text-align: start;
@@ -193,8 +193,8 @@
 .think-execution-workbench__detail {
   display: grid;
   align-content: start;
-  gap: 1rem;
-  padding: 1rem;
+  gap: var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-spacing-3);
   background: var(--sigvelo-color-surface);
 }