fix(ui): align remaining editor dropdown styling (#8051)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.test.tsx

@@ -204,7 +204,7 @@ function renderOutputSelect(
   selectedOutputs: string[],
   onOutputSelect = vi.fn(),
   valueMode: 'id' | 'label' | 'public' = 'id',
-  props: { size?: 'sm' | 'md'; disablePortal?: boolean } = {}
+  props: { size?: 'sm' | 'md'; variant?: 'default' | 'chip'; disablePortal?: boolean } = {}
 ) {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   container = document.createElement('div')
@@ -266,8 +266,12 @@ describe('OutputSelect nested workflow menu', () => {
     expect(document.body.textContent).not.toContain('Summarizer')
   })
 
-  it('forwards inline dropdown rendering to the chip combobox', () => {
-    renderOutputSelect([], vi.fn(), 'id', { size: 'md', disablePortal: true })
+  it('forwards inline dropdown rendering to explicitly chip-styled forms', () => {
+    renderOutputSelect([], vi.fn(), 'id', {
+      size: 'md',
+      variant: 'chip',
+      disablePortal: true,
+    })
 
     expect(container.querySelector('[data-chip-combobox]')).toHaveAttribute(
       'data-disable-portal',
@@ -284,7 +288,7 @@ describe('OutputSelect nested workflow menu', () => {
   })
 
   it('emits public dot selectors for trigger authoring', () => {
-    const onOutputSelect = renderOutputSelect([], vi.fn(), 'public')
+    const onOutputSelect = renderOutputSelect([], vi.fn(), 'public', { size: 'md' })
 
     clickOption('content')
     expect(onOutputSelect).toHaveBeenCalledWith(['summarizer.content'])

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx

@@ -50,11 +50,13 @@ interface OutputSelectProps {
   maxHeight?: number
   disablePortal?: boolean
   /**
-   * Trigger chrome. `'sm'` is the compact pill used in inline toolbars;
-   * `'md'` is the 30px chip field, for stacking with `ChipInput` in a form.
+   * Trigger size. `'sm'` is compact for inline toolbars;
+   * `'md'` matches the editor's full-size fields.
    * @default 'sm'
    */
   size?: 'sm' | 'md'
+  /** Use chip chrome when embedding the selector in a chip-styled form. */
+  variant?: 'default' | 'chip'
   /** Additional class names to apply to the combobox trigger */
   className?: string
 }
@@ -71,6 +73,7 @@ interface OutputSelectMenuProps {
   maxHeight: number
   disablePortal: boolean
   size: 'sm' | 'md'
+  variant: 'default' | 'chip'
   className?: string
 }
 
@@ -129,6 +132,7 @@ function OutputSelectContent({
   maxHeight = 200,
   disablePortal = false,
   size = 'sm',
+  variant = 'default',
   className,
 }: OutputSelectProps) {
   const blocks = useWorkflowStore((state) => state.blocks)
@@ -233,6 +237,7 @@ function OutputSelectContent({
       maxHeight={maxHeight}
       disablePortal={disablePortal}
       size={size}
+      variant={variant}
       className={className}
     />
   )
@@ -250,6 +255,7 @@ function OutputSelectMenu({
   maxHeight,
   disablePortal,
   size,
+  variant,
   className,
 }: OutputSelectMenuProps) {
   const [menuPath, setMenuPath] = useState<string[]>([])
@@ -318,7 +324,7 @@ function OutputSelectMenu({
         ...activeMenuNode.children.map(outputGroup),
       ]
     : outputMenu.map(outputGroup)
-  const Trigger = size === 'md' ? ChipCombobox : Combobox
+  const Trigger = variant === 'chip' ? ChipCombobox : Combobox
 
   return (
     <Trigger

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx

@@ -389,6 +389,7 @@ export function ChatDeploy({
               placeholder='Select which block outputs to use'
               disabled={chatSubmitting}
               size='md'
+              variant='chip'
               className='w-full'
               disablePortal
             />

apps/sim/components/mcp/operation-policy-editor.test.tsx

@@ -1,14 +1,14 @@
 /** @vitest-environment node */
 import type { ComponentProps } from 'react'
-import type { ChipDropdown, TagInput } from '@sim/emcn'
+import type { Combobox, TagInput } from '@sim/emcn'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 const { tagInput, dropdown } = vi.hoisted(() => ({
   tagInput: vi.fn<(props: ComponentProps<typeof TagInput>) => null>(() => null),
-  dropdown: vi.fn<(props: ComponentProps<typeof ChipDropdown>) => null>(() => null),
+  dropdown: vi.fn<(props: ComponentProps<typeof Combobox>) => null>(() => null),
 }))
-vi.mock('@sim/emcn', () => ({ TagInput: tagInput, ChipDropdown: dropdown }))
+vi.mock('@sim/emcn', () => ({ TagInput: tagInput, Combobox: dropdown }))
 
 import { McpOperationPolicyEditor } from '@/components/mcp/operation-policy-editor'
 

apps/sim/components/mcp/operation-policy-editor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useId, useState } from 'react'
-import { ChipDropdown, TagInput } from '@sim/emcn'
+import { Combobox, TagInput } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { type McpOperationPolicy, normalizeMcpOperationPolicy } from '@/lib/mcp/operation-policy'
 
@@ -41,7 +41,7 @@ export function McpOperationPolicyEditor({
 
   return (
     <div className='flex flex-col gap-2'>
-      <ChipDropdown
+      <Combobox
         aria-label='Operations access'
         value={policy.mode}
         disabled={disabled}