@mcp-b/react-components 0.41.0 → 0.43.0

package/dist/styles/code-block.css

@@ -1,7 +1,7 @@
 .code-block {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   min-inline-size: 0;
   font-family: inherit;
   /* Fill-based containment: no perimeter border */
@@ -13,9 +13,9 @@
 .code-block__header {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background-color: transparent;
 }
 
@@ -23,14 +23,14 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
 }
 
 .code-block__filename {
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-xs);
+  font-size: var(--sigvelo-text-meta);
   color: var(--sigvelo-color-text-muted);
 }
 
@@ -55,11 +55,11 @@
 
 .code-block__content {
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-gutter);
   padding-inline: var(--sigvelo-spacing-3-5);
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-code);
+  line-height: var(--sigvelo-text-code-leading);
   color: var(--sigvelo-color-text);
   overflow: visible;
 }
@@ -70,12 +70,12 @@
 
 .code-block__content--highlighted pre.shiki {
   margin: 0;
-  padding-block: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-gutter);
   padding-inline: var(--sigvelo-spacing-3-5);
   background-color: transparent !important;
   font-family: var(--sigvelo-font-mono);
-  font-size: var(--sigvelo-text-compact);
-  line-height: var(--sigvelo-leading-normal);
+  font-size: var(--sigvelo-text-code);
+  line-height: var(--sigvelo-text-code-leading);
   overflow: visible;
 }
 
@@ -100,7 +100,8 @@
 .code-block__content--numbered pre code .line::before {
   content: counter(line);
   display: inline-block;
-  width: 2rem;
+  inline-size: 2rem;
+  /* Line-number column. Not --sigvelo-layout-gutter. */
   padding-inline-end: var(--sigvelo-spacing-3);
   margin-inline-end: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text-muted);

package/dist/styles/codex-model-selector.css

@@ -184,6 +184,7 @@
   margin-inline-start: auto;
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size <= 36rem) {
   .codex-model-selector__trigger {
     justify-content: center;
@@ -200,6 +201,7 @@
   }
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container prompt-input (inline-size <= 22rem) {
   .codex-model-selector__trigger {
     inline-size: var(--sigvelo-control-height-xs);

package/dist/styles/collapsible.css

@@ -69,6 +69,7 @@
 }
 
 .collapsible__panel > * {
+  /* Disclosure content, not --sigvelo-layout-stack. */
   padding: var(--sigvelo-spacing-4);
   background-color: var(--sigvelo-color-surface);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)

package/dist/styles/commit.css

@@ -1,10 +1,10 @@
 .commit__header {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   inline-size: 100%;
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   background-color: transparent;
   border: none;
   color: var(--sigvelo-color-text);
@@ -113,9 +113,9 @@
 .commit__file {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-compact);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);

package/dist/styles/context.css

@@ -28,9 +28,9 @@
 .context__header {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-3);
-  padding-inline: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-gutter);
+  padding-inline: var(--sigvelo-layout-gutter);
 }
 
 .context__ring {
@@ -90,16 +90,16 @@
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   list-style: none;
   gap: var(--sigvelo-spacing-1-5);
 }
 
 .context__row {
   display: grid;
-  grid-template-columns: 1fr auto;
-  gap: var(--sigvelo-spacing-3);
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
+  gap: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-xs);
   align-items: baseline;
 }
@@ -129,8 +129,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
 }

package/dist/styles/conversation-tab-picker.css

@@ -9,7 +9,7 @@
   font-size: var(--sigvelo-text-sm);
   gap: var(--sigvelo-spacing-2);
   overflow-wrap: anywhere;
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter);
 }
 
 .conversation-tab-picker__error > svg {

package/dist/styles/conversation.css

@@ -1,7 +1,5 @@
 .conversation {
   position: relative;
-  inline-size: 100%;
-  block-size: 100%;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
@@ -21,8 +19,8 @@
 .conversation__content {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-stack);
+  padding: var(--sigvelo-layout-gutter);
   min-block-size: 100%;
 }
 
@@ -34,8 +32,8 @@
 
 .conversation__scroll-button {
   position: absolute;
-  inset-inline-end: var(--sigvelo-spacing-3);
-  inset-block-end: var(--sigvelo-spacing-3);
+  inset-inline-end: var(--sigvelo-layout-gutter);
+  inset-block-end: var(--sigvelo-layout-gutter);
   z-index: 1;
   /* Hovers over the transcript rather than sitting in it, so it takes the
      floating stack: the wide ambient layer is what separates it from whatever
@@ -46,8 +44,8 @@
 
 .conversation__download-button {
   position: absolute;
-  inset-inline-end: var(--sigvelo-spacing-3);
-  inset-block-start: var(--sigvelo-spacing-3);
+  inset-inline-end: var(--sigvelo-layout-gutter);
+  inset-block-start: var(--sigvelo-layout-gutter);
   z-index: 1;
   box-shadow: var(--sigvelo-elevation-floating);
   background-color: var(--sigvelo-color-surface-raised);

package/dist/styles/dialog.css

@@ -18,7 +18,7 @@
 }
 
 .dialog__popup {
-  --sigvelo-recipe-surface-padding: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-surface-padding: var(--sigvelo-layout-stack);
 
   position: fixed;
   inset-block-start: 50%;
@@ -59,15 +59,15 @@
   font-size: var(--sigvelo-text-sm);
   line-height: var(--sigvelo-text-sm-leading);
   color: var(--sigvelo-color-text-muted);
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .dialog__header {
   display: grid;
   gap: var(--sigvelo-spacing-1);
-  margin-block-end: var(--sigvelo-spacing-3);
+  margin-block-end: var(--sigvelo-layout-gutter);
 }
 
 .dialog__footer {
-  margin-block-start: var(--sigvelo-spacing-4);
+  margin-block-start: var(--sigvelo-layout-stack);
 }

package/dist/styles/empty-state.css

@@ -5,15 +5,15 @@
  * lives in one variable and the centring lives in the parent.
  */
 .empty-state {
-  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-spacing-4);
+  --sigvelo-recipe-empty-state-padding-block: var(--sigvelo-layout-stack);
 
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   padding-block: var(--sigvelo-recipe-empty-state-padding-block);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-inline: var(--sigvelo-layout-gutter);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   line-height: var(--sigvelo-text-compact-leading);

package/dist/styles/environment-variables.css

@@ -2,9 +2,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-3);
-  padding-block: var(--sigvelo-spacing-2-5);
-  padding-inline: var(--sigvelo-spacing-3-5);
+  gap: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -42,7 +42,7 @@
 
 .environment-variables__group-label {
   padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3-5);
+  padding-inline: var(--sigvelo-layout-gutter);
   font-size: var(--sigvelo-text-2xs);
   font-weight: var(--sigvelo-font-weight-bold);
   text-transform: uppercase;
@@ -56,9 +56,9 @@
 .environment-variables__row {
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2-5);
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3-5);
+  gap: var(--sigvelo-layout-cluster);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
 }
@@ -73,12 +73,12 @@
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   flex-shrink: 0;
-  min-width: 10rem;
+  min-inline-size: 10rem;
 }
 
 .environment-variables__value {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   padding-block: var(--sigvelo-spacing-1-5);
   padding-inline: var(--sigvelo-spacing-2);
   font-family: var(--sigvelo-font-mono);

package/dist/styles/field.css

@@ -32,7 +32,8 @@
   flex-direction: column;
 }
 
-@container (min-width: 28rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container (inline-size >= 28rem) {
   .field--responsive {
     flex-direction: row;
     align-items: center;

package/dist/styles/fieldset.css

@@ -1,8 +1,8 @@
 .fieldset {
   display: flex;
   flex-direction: column;
-  gap: var(--sigvelo-spacing-3);
-  padding: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-gutter);
+  padding: var(--sigvelo-layout-stack);
   margin: 0;
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);

package/dist/styles/index.css

@@ -18,7 +18,6 @@
 @import "./agent-attention.css" layer(components);
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
-@import "./agent-tool-detail.css" layer(components);
 @import "./approval.css" layer(components);
 @import "./alert-dialog.css" layer(components);
 @import "./attachment-preview.css" layer(components);
@@ -87,7 +86,6 @@
 @import "./browser-live-screen.css" layer(components);
 @import "./browser-control-overlay.css" layer(components);
 @import "./browser-run-panel.css" layer(components);
-@import "./browser-replay.css" layer(components);
 @import "./chain-of-thought.css" layer(components);
 @import "./checkpoint.css" layer(components);
 @import "./code-block.css" layer(components);
@@ -96,12 +94,14 @@
 @import "./conversation.css" layer(components);
 @import "./conversation-tab-picker.css" layer(components);
 @import "./codex-model-selector.css" layer(components);
+@import "./model-selector.css" layer(components);
+@import "./agent-tool-detail.css" layer(components);
+@import "./browser-replay.css" layer(components);
 @import "./environment-variables.css" layer(components);
 @import "./file-tree.css" layer(components);
 @import "./goal.css" layer(components);
 @import "./inline-citation.css" layer(components);
 @import "./message.css" layer(components);
-@import "./model-selector.css" layer(components);
 @import "./chatgpt-sign-in-screen.css" layer(components);
 @import "./plan.css" layer(components);
 @import "./prompt-input.css" layer(components);
@@ -122,6 +122,7 @@
 @import "./think-execution-workbench.css" layer(components);
 @import "./think-full-app.css" layer(components);
 @import "./think-routine-library.css" layer(components);
+@import "./think-sidepanel.css" layer(components);
 @import "./think-thread-picker.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);

package/dist/styles/manager-office.css

@@ -7,9 +7,9 @@
   block-size: 100%;
   min-inline-size: 0;
   display: grid;
-  grid-template-rows: auto auto auto minmax(0, 1fr);
+  grid-template-rows: auto auto auto var(--sigvelo-layout-track-fill);
   gap: var(--sigvelo-density-compact-control-gap);
-  padding: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-layout-cluster);
 }
 
 .manager-office__sidebar-heading,
@@ -66,7 +66,7 @@
 }
 
 .manager-office__attention-nav {
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto var(--sigvelo-layout-track-fill);
 }
 
 .manager-office__attention-nav > svg {
@@ -95,7 +95,7 @@
 }
 
 .manager-office__employee-link {
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
   padding-block: var(--sigvelo-spacing-1);
 }
 
@@ -139,17 +139,8 @@
  * status a screen-width away from the name it belonged to; Ploy caps the same
  * lists at 800px for the same reason.
  */
-.manager-office__attention,
-.manager-office__employee-detail {
-  min-inline-size: 0;
-  inline-size: 100%;
-  max-inline-size: 60rem;
-  margin-inline: auto;
-  padding: var(--sigvelo-spacing-4) var(--sigvelo-spacing-3);
-}
-
 .manager-office__attention-list {
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
 }
 
 /*
@@ -186,7 +177,7 @@
 
 .manager-office__work-link,
 .manager-office__routine-link {
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto;
 }
 
 .manager-office__row-chevron {
@@ -202,7 +193,7 @@
 .manager-office__employee-header {
   min-inline-size: 0;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto auto;
   align-items: center;
   gap: var(--sigvelo-spacing-3);
   padding-block: var(--sigvelo-spacing-1);
@@ -227,25 +218,26 @@
 /*
  * `AgentAttention` stacks header over body over actions, which is right when
  * the employee quoted its ask. When it did not, that stack spends a whole row
- * on a lone button, so the card pulls the way in up beside the ask instead.
+ * on a lone button, so the bare card pulls the way in up beside the ask instead.
  */
-.manager-office__handoff:not(:has(.agent-attention__body)) {
-  grid-template-columns: minmax(0, 1fr) auto;
+.manager-office__handoff--bare {
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
 }
 
 /* The verbatim ask is the point of the card; it wraps rather than truncating,
    unlike the description line above it. */
-.manager-office__handoff > .agent-attention__body {
+.manager-office__handoff-ask {
   grid-column: 1 / -1;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-text-sm);
   line-height: var(--sigvelo-text-sm-leading);
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container responsive-sidebar-shell (inline-size <= 34rem) {
-  .manager-office__handoff:not(:has(.agent-attention__body)) {
-    grid-template-columns: minmax(0, 1fr);
+  .manager-office__handoff--bare {
+    grid-template-columns: var(--sigvelo-layout-track-fill);
     gap: var(--sigvelo-spacing-2);
   }
 }
@@ -255,14 +247,14 @@
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr);
   align-items: stretch;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gap);
 }
 
 .manager-office__employee-aside {
   min-inline-size: 0;
   display: grid;
   align-content: start;
-  gap: var(--sigvelo-spacing-3);
+  gap: var(--sigvelo-layout-gap);
 }
 
 .manager-office__section {
@@ -270,14 +262,14 @@
   display: grid;
   align-content: start;
   gap: var(--sigvelo-spacing-2);
-  padding-block: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-gutter);
 }
 
 .manager-office__section-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
 }
 
 /* The glyph makes the three panes distinct before their labels are read. */
@@ -307,7 +299,7 @@
 }
 
 .manager-office__channel {
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  grid-template-columns: auto var(--sigvelo-layout-track-fill) auto auto;
   padding: var(--sigvelo-spacing-1) 0;
 }
 
@@ -360,7 +352,7 @@
   inline-size: 100%;
   min-inline-size: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   justify-content: stretch;
   padding-inline: 0;
@@ -451,6 +443,7 @@
   padding: var(--sigvelo-spacing-6) var(--sigvelo-spacing-3);
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container responsive-sidebar-shell (inline-size <= 42rem) {
   .manager-office__attention,
   .manager-office__employee-detail {
@@ -458,10 +451,11 @@
   }
 
   .manager-office__employee-columns {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: var(--sigvelo-layout-track-fill);
   }
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container responsive-sidebar-shell (inline-size <= 30rem) {
   .manager-office__status > span {
     display: none;

package/dist/styles/mcp-plugin-catalog.css

@@ -22,10 +22,10 @@
   flex: none;
   display: flex;
   align-items: center;
-  gap: var(--sigvelo-spacing-2);
-  min-block-size: calc(var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2));
+  gap: var(--sigvelo-layout-cluster);
+  min-block-size: var(--sigvelo-layout-chrome);
   padding-block: var(--sigvelo-spacing-1);
-  padding-inline: var(--sigvelo-spacing-2);
+  padding-inline: var(--sigvelo-layout-gutter);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   box-shadow: var(--sigvelo-elevation-bar);
@@ -51,8 +51,8 @@
   flex: 1;
   min-block-size: 0;
   overflow: auto;
-  padding-inline: var(--sigvelo-spacing-4);
-  padding-block: var(--sigvelo-spacing-2) var(--sigvelo-spacing-4);
+  padding-inline: var(--sigvelo-layout-gutter);
+  padding-block: var(--sigvelo-layout-cluster) var(--sigvelo-layout-stack);
 }
 
 .mcp-plugin-catalog__body > * {
@@ -61,7 +61,7 @@
 }
 
 .mcp-plugin-catalog__installed {
-  gap: var(--sigvelo-spacing-2);
+  gap: var(--sigvelo-layout-cluster);
   margin-block-end: var(--sigvelo-spacing-5);
 }
 
@@ -101,7 +101,7 @@
 
 .mcp-plugin-catalog__card {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   gap: var(--sigvelo-spacing-2);
   min-block-size: var(--sigvelo-spacing-12);
@@ -121,7 +121,7 @@
 
 .mcp-plugin-catalog__card-main {
   display: grid;
-  grid-template-columns: var(--sigvelo-spacing-8) minmax(0, 1fr);
+  grid-template-columns: var(--sigvelo-spacing-8) var(--sigvelo-layout-track-fill);
   align-items: center;
   justify-content: start;
   gap: var(--sigvelo-spacing-3);
@@ -269,7 +269,7 @@
   display: flex;
   justify-content: center;
   margin-block-start: auto;
-  padding-block: var(--sigvelo-spacing-4) var(--sigvelo-spacing-8);
+  padding-block: var(--sigvelo-layout-stack) var(--sigvelo-spacing-8);
 }
 
 .mcp-plugin-details__disclosure {
@@ -293,8 +293,9 @@
   }
 }
 
+/* Local wrap. Not --sigvelo-layout-break-compact. */
 @container mcp-plugin-catalog (inline-size >= 36rem) {
   .mcp-plugin-catalog__list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
   }
 }

package/dist/styles/mcp-server-picker.css

@@ -25,7 +25,7 @@
 
 .mcp-server-picker__row-shell {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: var(--sigvelo-layout-track-fill) auto;
   align-items: center;
   transition: background-color var(--sigvelo-motion-duration-interaction)
     var(--sigvelo-motion-ease-change);
@@ -151,8 +151,8 @@
 }
 
 .mcp-server-picker__empty {
-  padding-block: var(--sigvelo-spacing-2);
-  padding-inline: var(--sigvelo-spacing-3);
+  padding-block: var(--sigvelo-layout-cluster);
+  padding-inline: var(--sigvelo-layout-gutter);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-sm);
 }