From af8b8cb653ffa3727d2747b320668585ee41c6d7 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 19 Sep 2026 17:38:18 -0700
Subject: [PATCH 1/2] fix(ui): align fallback model subblock styling

---
 .../model-fallback-list.test.tsx              |  3 +
 .../model-fallback-list.tsx                   | 66 ++++++++++++-------
 2 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
index 701db95d900..aa1cde7edc5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
@@ -30,6 +30,9 @@ vi.mock('next/navigation', () => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
+  Button: ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button {...props}>{children}</button>
+  ),
   Chip: ({
     children,
     disabled,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
index 15b7bcefdd1..6004ff79b96 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
@@ -1,7 +1,15 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { Chip, ChipCombobox, ChipDropdown, type ComboboxOption, Label, Tooltip } from '@sim/emcn'
+import {
+  Button,
+  Chip,
+  ChipCombobox,
+  ChipDropdown,
+  type ComboboxOption,
+  Label,
+  Tooltip,
+} from '@sim/emcn'
 import { ChevronDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
@@ -123,34 +131,39 @@ const FallbackRow = memo(function FallbackRow({
   const apiKeyValue = isWholeEnvVarReference(row.apiKey) ? row.apiKey : ''
 
   return (
-    <div
-      data-fallback-row-id={row.id}
-      className='space-y-3 rounded-lg border border-[var(--border)] p-3'
-    >
-      <div className='flex items-center justify-between'>
-        <span className='text-[var(--text-muted)] text-small'>{ordinalChoiceLabel(index)}</span>
-        <div className='flex items-center'>
+    <div data-fallback-row-id={row.id} className='min-w-0 rounded-sm border border-[var(--border)]'>
+      <div className='flex items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-1'>
+        <span className='text-[var(--text-secondary)] text-small'>{ordinalChoiceLabel(index)}</span>
+        <div className='flex shrink-0 items-center gap-1'>
           {canMove && (
             <>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Chip
-                    leftIcon={ChevronUp}
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='icon'
                     onClick={() => onMove(row.id, -1)}
                     disabled={readOnly || index === 0}
                     aria-label='Move up'
-                  />
+                  >
+                    <ChevronUp className='size-[14px]' />
+                  </Button>
                 </Tooltip.Trigger>
                 <Tooltip.Content>Move up</Tooltip.Content>
               </Tooltip.Root>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Chip
-                    leftIcon={ChevronDown}
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    size='icon'
                     onClick={() => onMove(row.id, 1)}
                     disabled={readOnly || isLast}
                     aria-label='Move down'
-                  />
+                  >
+                    <ChevronDown className='size-[14px]' />
+                  </Button>
                 </Tooltip.Trigger>
                 <Tooltip.Content>Move down</Tooltip.Content>
               </Tooltip.Root>
@@ -158,19 +171,23 @@ const FallbackRow = memo(function FallbackRow({
           )}
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <Chip
-                leftIcon={Trash}
+              <Button
+                type='button'
+                variant='ghost'
+                size='icon'
                 onClick={() => onRemove(row.id)}
                 disabled={readOnly}
                 aria-label='Remove fallback model'
-              />
+              >
+                <Trash className='size-[14px]' />
+              </Button>
             </Tooltip.Trigger>
             <Tooltip.Content>Remove</Tooltip.Content>
           </Tooltip.Root>
         </div>
       </div>
 
-      <div className='flex flex-col gap-3'>
+      <div className='flex flex-col gap-2.5 rounded-b-[4px] border-[var(--border)] border-t bg-[var(--surface-2)] p-2'>
         <ChipCombobox
           options={modelOptions}
           value={row.model}
@@ -184,8 +201,8 @@ const FallbackRow = memo(function FallbackRow({
           emptyMessage='No models available'
         />
         {needsApiKey && (
-          <div className='flex flex-col gap-1.5'>
-            <Label>API key</Label>
+          <div className='flex flex-col gap-2.5'>
+            <Label className='pl-0.5'>API key</Label>
             <ChipCombobox
               options={envVarOptions}
               value={apiKeyValue}
@@ -201,8 +218,8 @@ const FallbackRow = memo(function FallbackRow({
           </div>
         )}
         {tuningFields.map(({ knob, options }) => (
-          <div key={knob} className='flex flex-col gap-1.5'>
-            <Label>{FALLBACK_TUNING_LABELS[knob]}</Label>
+          <div key={knob} className='flex flex-col gap-2.5'>
+            <Label className='pl-0.5'>{FALLBACK_TUNING_LABELS[knob]}</Label>
             <ChipDropdown
               options={options}
               value={row[knob] ?? options[0]?.value ?? ''}
@@ -387,7 +404,7 @@ export function ModelFallbackList({
   )
 
   return (
-    <div className='space-y-2'>
+    <div className='flex w-full min-w-0 flex-col gap-2.5'>
       {rows.map((row, index) => (
         <FallbackRow
           key={row.id}
@@ -410,9 +427,8 @@ export function ModelFallbackList({
       ))}
       {!readOnly && (
         <Chip
-          variant='outline'
           leftIcon={Plus}
-          fullWidth
+          className='self-start'
           onClick={handleAdd}
           disabled={rows.length >= MAX_FALLBACK_MODELS}
         >

From faedae938afddf5639809174812bdc6c18c25dc5 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 19 Sep 2026 17:51:21 -0700
Subject: [PATCH 2/2] fix(ui): keep editor pickers on shared combobox styling

---
 .../knowledge-base-selector.tsx                 |  4 ++--
 .../mcp-server-modal/mcp-server-selector.tsx    |  4 ++--
 .../mcp-server-modal/mcp-tool-selector.tsx      |  4 ++--
 .../model-fallback-list.test.tsx                | 17 +----------------
 .../model-fallback-list/model-fallback-list.tsx | 16 ++++------------
 .../workspace-folder-selector.test.tsx          |  2 +-
 .../workspace-folder-selector.tsx               |  4 ++--
 apps/sim/components/mcp/mcp-selectors.test.tsx  |  6 +++---
 .../components/combobox/combobox.dom.test.tsx   | 16 ++++++++++++++++
 .../emcn/src/components/combobox/combobox.tsx   | 15 ++++++++-------
 10 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
index a9a25f64059..e7d794bf22b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo } from 'react'
-import { ChipCombobox, ChipTag, type ComboboxOption } from '@sim/emcn'
+import { ChipTag, Combobox, type ComboboxOption } from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { useQueries } from '@tanstack/react-query'
 import { useParams } from 'next/navigation'
@@ -211,7 +211,7 @@ export function KnowledgeBaseSelector({
         </div>
       )}
 
-      <ChipCombobox
+      <Combobox
         options={options}
         value={isMultiSelect ? undefined : (selectedIds[0] ?? '')}
         multiSelect={isMultiSelect}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
index 87972b57f74..829e9a19866 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-server-selector.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { ChipCombobox } from '@sim/emcn'
+import { Combobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { McpIcon } from '@/components/icons'
 import { getMcpTargetOptions } from '@/components/mcp/target-options'
@@ -65,7 +65,7 @@ export function McpServerSelector({
   })
 
   return (
-    <ChipCombobox
+    <Combobox
       options={comboboxOptions}
       value={inputValue}
       selectedValue={selectedServerId}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
index 6600d6301bd..fca7044a1cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-server-modal/mcp-tool-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { ChipCombobox } from '@sim/emcn'
+import { Combobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
@@ -86,7 +86,7 @@ export function McpToolSelector({
   })
 
   return (
-    <ChipCombobox
+    <Combobox
       options={comboboxOptions}
       value={inputValue}
       selectedValue={selectedToolId}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
index aa1cde7edc5..63b52302b9c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.test.tsx
@@ -46,7 +46,7 @@ vi.mock('@sim/emcn', () => ({
       {children}
     </button>
   ),
-  ChipCombobox: ({
+  Combobox: ({
     options,
     value,
     placeholder,
@@ -63,21 +63,6 @@ vi.mock('@sim/emcn', () => ({
       ))}
     </div>
   ),
-  ChipDropdown: ({
-    options,
-    value,
-    placeholder,
-  }: {
-    options: Array<{ value: string; label: string }>
-    value?: string
-    placeholder?: string
-  }) => (
-    <div data-combobox={placeholder} data-value={value}>
-      {options.map((option) => (
-        <span key={option.value}>{option.label}</span>
-      ))}
-    </div>
-  ),
   Label: ({ children }: { children?: React.ReactNode }) => <span>{children}</span>,
   Tooltip: {
     Root: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
index 6004ff79b96..6ddf80cb533 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/model-fallback-list/model-fallback-list.tsx
@@ -1,15 +1,7 @@
 'use client'
 
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import {
-  Button,
-  Chip,
-  ChipCombobox,
-  ChipDropdown,
-  type ComboboxOption,
-  Label,
-  Tooltip,
-} from '@sim/emcn'
+import { Button, Chip, Combobox, type ComboboxOption, Label, Tooltip } from '@sim/emcn'
 import { ChevronDown, ChevronUp, Plus, Trash } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
 import { useParams } from 'next/navigation'
@@ -188,7 +180,7 @@ const FallbackRow = memo(function FallbackRow({
       </div>
 
       <div className='flex flex-col gap-2.5 rounded-b-[4px] border-[var(--border)] border-t bg-[var(--surface-2)] p-2'>
-        <ChipCombobox
+        <Combobox
           options={modelOptions}
           value={row.model}
           onChange={(model) => onChangeModel(row.id, model)}
@@ -203,7 +195,7 @@ const FallbackRow = memo(function FallbackRow({
         {needsApiKey && (
           <div className='flex flex-col gap-2.5'>
             <Label className='pl-0.5'>API key</Label>
-            <ChipCombobox
+            <Combobox
               options={envVarOptions}
               value={apiKeyValue}
               onChange={(apiKey) => onChangeApiKey(row.id, apiKey)}
@@ -220,7 +212,7 @@ const FallbackRow = memo(function FallbackRow({
         {tuningFields.map(({ knob, options }) => (
           <div key={knob} className='flex flex-col gap-2.5'>
             <Label className='pl-0.5'>{FALLBACK_TUNING_LABELS[knob]}</Label>
-            <ChipDropdown
+            <Combobox
               options={options}
               value={row[knob] ?? options[0]?.value ?? ''}
               onChange={(value) => onChangeTuning(row.id, knob, value)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.test.tsx
index a4ce92a823d..54d0fc6d600 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.test.tsx
@@ -20,7 +20,7 @@ vi.mock('next/navigation', () => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
-  ChipCombobox: ({
+  Combobox: ({
     options,
     disabled,
     isLoading,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.tsx
index 45e74f7074e..bf16b037dca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workspace-folder-selector/workspace-folder-selector.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { ChipCombobox } from '@sim/emcn'
+import { Combobox } from '@sim/emcn'
 import { useParams } from 'next/navigation'
 import type { FolderResourceType } from '@/lib/api/contracts/folders'
 import { parseFolderPath } from '@/lib/folders/paths'
@@ -58,7 +58,7 @@ export function WorkspaceFolderSelector({
   }, [folders, isPlaceholderData, required, subBlock.multiSelect, subBlock.placeholder])
 
   return (
-    <ChipCombobox
+    <Combobox
       options={options}
       value={subBlock.multiSelect ? undefined : selected}
       onChange={(value) => {
diff --git a/apps/sim/components/mcp/mcp-selectors.test.tsx b/apps/sim/components/mcp/mcp-selectors.test.tsx
index 62536e82b35..9918083fcbb 100644
--- a/apps/sim/components/mcp/mcp-selectors.test.tsx
+++ b/apps/sim/components/mcp/mcp-selectors.test.tsx
@@ -1,11 +1,11 @@
 /** @vitest-environment node */
 import type { ComponentProps } from 'react'
-import type { ChipCombobox } from '@sim/emcn'
+import type { Combobox } from '@sim/emcn'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 const mocks = vi.hoisted(() => ({
-  combobox: vi.fn<(props: ComponentProps<typeof ChipCombobox>) => null>(() => null),
+  combobox: vi.fn<(props: ComponentProps<typeof Combobox>) => null>(() => null),
   setValue: vi.fn(),
   longInput: vi.fn(() => null),
   shortInput: vi.fn(() => null),
@@ -38,7 +38,7 @@ vi.mock('@/stores/workflow-diff/store', () => ({
       },
     }),
 }))
-vi.mock('@sim/emcn', () => ({ ChipCombobox: mocks.combobox, Label: () => null }))
+vi.mock('@sim/emcn', () => ({ Combobox: mocks.combobox, Label: () => null }))
 vi.mock(
   '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input',
   () => ({ LongInput: mocks.longInput })
diff --git a/packages/emcn/src/components/combobox/combobox.dom.test.tsx b/packages/emcn/src/components/combobox/combobox.dom.test.tsx
index f410e4a96ca..a722d3229f5 100644
--- a/packages/emcn/src/components/combobox/combobox.dom.test.tsx
+++ b/packages/emcn/src/components/combobox/combobox.dom.test.tsx
@@ -76,6 +76,22 @@ afterEach(() => {
 })
 
 describe('Combobox onOpenChange', () => {
+  it('preserves trigger styling when an editable input adds padding for a clear button', () => {
+    render(
+      <Combobox
+        options={OPTIONS}
+        editable
+        className='min-w-0'
+        inputProps={{ className: 'pr-[60px]' }}
+      />
+    )
+
+    const control = trigger()
+    expect(control.classList.contains('min-w-0')).toBe(true)
+    expect(control.classList.contains('pr-[60px]')).toBe(true)
+    expect(control.classList.contains('pr-10')).toBe(false)
+  })
+
   it.each([false, true])(
     'puts the field name and validation ARIA on the interactive control (editable=%s)',
     (editable) => {
diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx
index 39858f47f67..e77eeda0007 100644
--- a/packages/emcn/src/components/combobox/combobox.tsx
+++ b/packages/emcn/src/components/combobox/combobox.tsx
@@ -790,13 +790,6 @@ const Combobox = memo(
                   <div className='group relative'>
                     <Input
                       ref={inputRef}
-                      className={cn(
-                        'w-full pr-10 transition-colors',
-                        (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
-                        SelectedIcon && !overlayContent && 'pl-7',
-                        open && 'focus-visible:border-[var(--border-1)]',
-                        className
-                      )}
                       placeholder={placeholder}
                       value={value ?? ''}
                       onChange={handleInputChange}
@@ -810,6 +803,14 @@ const Combobox = memo(
                       aria-required={ariaRequired}
                       aria-invalid={ariaInvalid}
                       {...inputProps}
+                      className={cn(
+                        'w-full pr-10 transition-colors',
+                        (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
+                        SelectedIcon && !overlayContent && 'pl-7',
+                        open && 'focus-visible:border-[var(--border-1)]',
+                        className,
+                        inputProps?.className
+                      )}
                       role='combobox'
                       aria-expanded={open}
                       aria-haspopup='listbox'