diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 8502854b75d..c23c18ba66c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -3,18 +3,17 @@ import {
   Badge,
   Button,
   Code,
+  CollapsibleCard,
   Combobox,
   type ComboboxOption,
   calculateGutterWidth,
   cn,
-  Expandable,
-  ExpandableContent,
   getCodeEditorProps,
-  handleKeyboardActivation,
   highlight,
   Input,
   Label,
   languages,
+  OverflowText,
   Tooltip,
 } from '@sim/emcn'
 import { ArrowLeftRight, Plus, Trash } from '@sim/emcn/icons'
@@ -388,52 +387,6 @@ export function FieldFormat({
     )
   }
 
-  /**
-   * Renders the field header with name, type badge, and action buttons
-   */
-  const renderFieldHeader = (field: Field, index: number) => (
-    <div
-      role='group'
-      aria-label={`${title} ${index + 1}`}
-      className='flex cursor-pointer items-center justify-between rounded-t-[3px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={() => toggleCollapse(field.id)}
-      onKeyDown={(event) => {
-        if (event.target !== event.currentTarget) return
-        handleKeyboardActivation(event, () => toggleCollapse(field.id))
-      }}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {field.name || `${title} ${index + 1}`}
-        </span>
-        {field.name && showType && (
-          <Badge variant='type' size='sm'>
-            {field.type}
-          </Badge>
-        )}
-      </div>
-      <div
-        role='presentation'
-        className='flex items-center gap-2 pl-2'
-        onClick={(e) => e.stopPropagation()}
-      >
-        <Button variant='ghost' onClick={addField} disabled={isReadOnly} className='h-auto p-0'>
-          <Plus className='size-[14px]' />
-          <span className='sr-only'>Add {title}</span>
-        </Button>
-        <Button
-          variant='ghost-destructive'
-          onClick={() => removeField(field.id)}
-          disabled={isReadOnly}
-          className='h-auto p-0 hover-hover:opacity-90'
-        >
-          <Trash className='size-[14px]' />
-          <span className='sr-only'>Delete Field</span>
-        </Button>
-      </div>
-    </div>
-  )
-
   /**
    * Renders the value input field based on the field type
    */
@@ -670,113 +623,145 @@ export function FieldFormat({
   return (
     <div className='space-y-2'>
       {fields.map((field, index) => (
-        <div
+        <CollapsibleCard
           key={field.id}
           data-field-id={field.id}
-          className='overflow-hidden rounded-sm border border-[var(--border-1)]'
+          role='group'
+          aria-label={`${title} ${index + 1}`}
+          className='overflow-hidden'
+          title={
+            <span className='flex min-w-0 items-center gap-2'>
+              <OverflowText
+                label={field.name || `${title} ${index + 1}`}
+                focusTarget='nearest-interactive'
+              />
+              {field.name && showType && (
+                <Badge variant='type' size='sm'>
+                  {field.type}
+                </Badge>
+              )}
+            </span>
+          }
+          collapsed={!!field.collapsed}
+          onToggleCollapse={() => toggleCollapse(field.id)}
+          animated
+          actions={
+            <>
+              <Button
+                variant='ghost'
+                onClick={addField}
+                disabled={isReadOnly}
+                className='h-auto p-0'
+              >
+                <Plus className='size-[14px]' />
+                <span className='sr-only'>Add {title}</span>
+              </Button>
+              <Button
+                variant='ghost-destructive'
+                onClick={() => removeField(field.id)}
+                disabled={isReadOnly}
+                className='h-auto p-0 hover-hover:opacity-90'
+              >
+                <Trash className='size-[14px]' />
+                <span className='sr-only'>Delete Field</span>
+              </Button>
+            </>
+          }
         >
-          {renderFieldHeader(field, index)}
-
-          <Expandable expanded={!field.collapsed}>
-            <ExpandableContent>
-              <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                <div className='flex flex-col gap-1.5'>
-                  {renderFieldLabel('Name')}
-                  <div className='relative'>{renderNameInput(field)}</div>
-                </div>
+          <div className='flex flex-col gap-1.5'>
+            {renderFieldLabel('Name')}
+            <div className='relative'>{renderNameInput(field)}</div>
+          </div>
+
+          {showType && (
+            <div className='flex flex-col gap-1.5'>
+              {renderFieldLabel('Type')}
+              <Combobox
+                options={TYPE_OPTIONS}
+                value={field.type}
+                onChange={(value) => updateField(field.id, 'type', value)}
+                disabled={isReadOnly}
+              />
+            </div>
+          )}
 
-                {showType && (
-                  <div className='flex flex-col gap-1.5'>
-                    {renderFieldLabel('Type')}
-                    <Combobox
-                      options={TYPE_OPTIONS}
-                      value={field.type}
-                      onChange={(value) => updateField(field.id, 'type', value)}
-                      disabled={isReadOnly}
-                    />
-                  </div>
-                )}
-
-                {showDescription && (
-                  <div className='flex flex-col gap-1.5'>
-                    {renderFieldLabel('Description')}
-                    <div className='relative'>
-                      <Input
-                        ref={(el) => {
-                          if (el) descriptionInputRefs.current[field.id] = el
-                        }}
-                        value={field.description ?? ''}
-                        onChange={(e) => updateField(field.id, 'description', e.target.value)}
-                        onScroll={(e) =>
-                          syncDescriptionOverlayScroll(field.id, e.currentTarget.scrollLeft)
-                        }
-                        onPaste={() =>
-                          setTimeout(() => {
-                            const input = descriptionInputRefs.current[field.id]
-                            input && syncDescriptionOverlayScroll(field.id, input.scrollLeft)
-                          }, 0)
-                        }
-                        placeholder={descriptionPlaceholder}
-                        disabled={isReadOnly}
-                        autoComplete='off'
-                        className='allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
-                      />
-                      <div
-                        ref={(el) => {
-                          if (el) descriptionOverlayRefs.current[field.id] = el
-                        }}
-                        style={{ scrollbarWidth: 'none' }}
-                        className={cn(
-                          'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-                          isReadOnly && 'opacity-50'
-                        )}
-                      >
-                        <span className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
-                          {formatDisplayText(
-                            field.description ?? '',
-                            accessiblePrefixes
-                              ? {
-                                  accessiblePrefixes,
-                                  workflowSearchHighlight: getActiveWorkflowSearchHighlight({
-                                    activeSearchTarget,
-                                    blockId,
-                                    subBlockId,
-                                    valuePath: [index, 'description'],
-                                  }),
-                                }
-                              : {
-                                  highlightAll: true,
-                                  workflowSearchHighlight: getActiveWorkflowSearchHighlight({
-                                    activeSearchTarget,
-                                    blockId,
-                                    subBlockId,
-                                    valuePath: [index, 'description'],
-                                  }),
-                                }
-                          )}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {showValue && (
-                  <div className='flex flex-col gap-1.5'>
-                    {isFileFieldType(field.type) ? (
-                      <div className='flex items-center justify-between'>
-                        {renderFieldLabel('Value')}
-                        {renderFileModeToggle(field)}
-                      </div>
-                    ) : (
-                      renderFieldLabel('Value')
+          {showDescription && (
+            <div className='flex flex-col gap-1.5'>
+              {renderFieldLabel('Description')}
+              <div className='relative'>
+                <Input
+                  ref={(el) => {
+                    if (el) descriptionInputRefs.current[field.id] = el
+                  }}
+                  value={field.description ?? ''}
+                  onChange={(e) => updateField(field.id, 'description', e.target.value)}
+                  onScroll={(e) =>
+                    syncDescriptionOverlayScroll(field.id, e.currentTarget.scrollLeft)
+                  }
+                  onPaste={() =>
+                    setTimeout(() => {
+                      const input = descriptionInputRefs.current[field.id]
+                      input && syncDescriptionOverlayScroll(field.id, input.scrollLeft)
+                    }, 0)
+                  }
+                  placeholder={descriptionPlaceholder}
+                  disabled={isReadOnly}
+                  autoComplete='off'
+                  className='allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50'
+                />
+                <div
+                  ref={(el) => {
+                    if (el) descriptionOverlayRefs.current[field.id] = el
+                  }}
+                  style={{ scrollbarWidth: 'none' }}
+                  className={cn(
+                    'pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
+                    isReadOnly && 'opacity-50'
+                  )}
+                >
+                  <span className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+                    {formatDisplayText(
+                      field.description ?? '',
+                      accessiblePrefixes
+                        ? {
+                            accessiblePrefixes,
+                            workflowSearchHighlight: getActiveWorkflowSearchHighlight({
+                              activeSearchTarget,
+                              blockId,
+                              subBlockId,
+                              valuePath: [index, 'description'],
+                            }),
+                          }
+                        : {
+                            highlightAll: true,
+                            workflowSearchHighlight: getActiveWorkflowSearchHighlight({
+                              activeSearchTarget,
+                              blockId,
+                              subBlockId,
+                              valuePath: [index, 'description'],
+                            }),
+                          }
                     )}
-                    <div className='relative'>{renderValueInput(field)}</div>
-                  </div>
-                )}
+                  </span>
+                </div>
               </div>
-            </ExpandableContent>
-          </Expandable>
-        </div>
+            </div>
+          )}
+
+          {showValue && (
+            <div className='flex flex-col gap-1.5'>
+              {isFileFieldType(field.type) ? (
+                <div className='flex items-center justify-between'>
+                  {renderFieldLabel('Value')}
+                  {renderFileModeToggle(field)}
+                </div>
+              ) : (
+                renderFieldLabel('Value')
+              )}
+              <div className='relative'>{renderValueInput(field)}</div>
+            </div>
+          )}
+        </CollapsibleCard>
       ))}
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 5ce53f38f50..85da29e76f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -2,12 +2,13 @@ import { useEffect, useRef, useState } from 'react'
 import {
   Badge,
   Button,
+  CollapsibleCard,
   Combobox,
   type ComboboxOption,
   cn,
-  handleKeyboardActivation,
   Input,
   Label,
+  OverflowText,
   Textarea,
   Tooltip,
 } from '@sim/emcn'
@@ -382,39 +383,32 @@ export function VariablesInput({
             })
 
             return (
-              <div
+              <CollapsibleCard
                 key={assignment.id}
                 data-assignment-id={assignment.id}
-                className={cn(
-                  'rounded-sm border border-[var(--border-1)]',
-                  collapsed ? 'overflow-hidden' : 'overflow-visible'
-                )}
-              >
-                <div
-                  role='button'
-                  tabIndex={0}
-                  className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-                  onClick={() => toggleCollapse(assignment.id)}
-                  onKeyDown={(event) => {
-                    if (event.target !== event.currentTarget) return
-                    handleKeyboardActivation(event, () => toggleCollapse(assignment.id))
-                  }}
-                >
-                  <div className='flex min-w-0 flex-1 items-center gap-2'>
-                    <span className='block truncate text-[var(--text-tertiary)] text-sm'>
+                title={
+                  <span className='flex min-w-0 items-center gap-2'>
+                    <OverflowText
+                      label={assignment.variableName || `Variable ${index + 1}`}
+                      focusTarget='nearest-interactive'
+                    >
                       {assignment.variableName
                         ? formatDisplayText(assignment.variableName, {
                             workflowSearchHighlight: variableLabelHighlight,
                           })
                         : `Variable ${index + 1}`}
-                    </span>
+                    </OverflowText>
                     {assignment.variableName && (
                       <Badge variant='type' size='sm'>
                         {assignment.type}
                       </Badge>
                     )}
-                  </div>
-                  <div className='flex items-center gap-2 pl-2'>
+                  </span>
+                }
+                collapsed={collapsed}
+                onToggleCollapse={() => toggleCollapse(assignment.id)}
+                actions={
+                  <>
                     <Button
                       variant='ghost'
                       onClick={(e) => {
@@ -439,252 +433,244 @@ export function VariablesInput({
                       <Trash className='size-[14px]' />
                       <span className='sr-only'>Delete Variable</span>
                     </Button>
-                  </div>
+                  </>
+                }
+              >
+                <div className='flex flex-col gap-1.5'>
+                  <Label className='text-small'>Variable</Label>
+                  <Combobox
+                    options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
+                    value={assignment.variableId || ''}
+                    onChange={(value) => handleVariableSelect(assignment.id, value)}
+                    placeholder='Select a variable...'
+                    disabled={isReadOnly}
+                    overlayContent={
+                      variableLabelHighlight ? (
+                        <span className='truncate text-[var(--text-primary)]'>
+                          {formatDisplayText(variableLabel, {
+                            workflowSearchHighlight: variableLabelHighlight,
+                          })}
+                        </span>
+                      ) : undefined
+                    }
+                  />
                 </div>
 
-                {!collapsed && (
-                  <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-                    <div className='flex flex-col gap-1.5'>
-                      <Label className='text-small'>Variable</Label>
-                      <Combobox
-                        options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
-                        value={assignment.variableId || ''}
-                        onChange={(value) => handleVariableSelect(assignment.id, value)}
-                        placeholder='Select a variable...'
-                        disabled={isReadOnly}
-                        overlayContent={
-                          variableLabelHighlight ? (
-                            <span className='truncate text-[var(--text-primary)]'>
-                              {formatDisplayText(variableLabel, {
-                                workflowSearchHighlight: variableLabelHighlight,
-                              })}
-                            </span>
-                          ) : undefined
+                <div className='flex flex-col gap-1.5'>
+                  <div className='flex items-center justify-between'>
+                    <Label className='text-small'>Value</Label>
+                    {assignment.type === 'boolean' && (
+                      <Tooltip.Root>
+                        <Tooltip.Trigger asChild>
+                          <button
+                            type='button'
+                            className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+                            onClick={() =>
+                              setManualBooleanModes((prev) => ({
+                                ...prev,
+                                [assignment.id]: !isManualBoolean,
+                              }))
+                            }
+                            disabled={isReadOnly}
+                            aria-label={
+                              isManualBoolean ? 'Switch to selector' : 'Switch to manual value'
+                            }
+                          >
+                            <ArrowLeftRight
+                              className={cn(
+                                'h-[12px]! w-[12px]!',
+                                isManualBoolean
+                                  ? 'text-[var(--text-primary)]'
+                                  : 'text-[var(--text-secondary)]'
+                              )}
+                            />
+                          </button>
+                        </Tooltip.Trigger>
+                        <Tooltip.Content side='top'>
+                          <p>{isManualBoolean ? 'Switch to selector' : 'Switch to manual value'}</p>
+                        </Tooltip.Content>
+                      </Tooltip.Root>
+                    )}
+                  </div>
+                  {assignment.type === 'boolean' && !isManualBoolean ? (
+                    <Combobox
+                      options={BOOLEAN_OPTIONS}
+                      value={assignment.value ?? ''}
+                      onChange={(v) => !isReadOnly && updateAssignment(assignment.id, { value: v })}
+                      placeholder='Select value'
+                      disabled={isReadOnly}
+                      overlayContent={
+                        booleanLabelHighlight ? (
+                          <span className='truncate text-[var(--text-primary)]'>
+                            {formatDisplayText(assignment.value ?? '', {
+                              workflowSearchHighlight: booleanLabelHighlight,
+                            })}
+                          </span>
+                        ) : undefined
+                      }
+                    />
+                  ) : assignment.type === 'object' || assignment.type === 'array' ? (
+                    <div className='relative'>
+                      <Textarea
+                        ref={(el) => {
+                          if (el) valueInputRefs.current[assignment.id] = el
+                        }}
+                        value={assignment.value || ''}
+                        onChange={(e) =>
+                          handleValueInputChange(
+                            assignment.id,
+                            e.target.value,
+                            e.target.selectionStart ?? undefined
+                          )
+                        }
+                        onKeyDown={handleKeyDown}
+                        onFocus={() => {
+                          if (!isReadOnly && !assignment.value?.trim()) {
+                            setActiveFieldId(assignment.id)
+                            setCursorPosition(0)
+                            setShowTags(true)
+                          }
+                        }}
+                        onScroll={(e) => {
+                          const overlay = overlayRefs.current[assignment.id]
+                          if (overlay) {
+                            overlay.scrollTop = e.currentTarget.scrollTop
+                            overlay.scrollLeft = e.currentTarget.scrollLeft
+                          }
+                        }}
+                        placeholder={
+                          assignment.type === 'object'
+                            ? '{\n  "key": "value"\n}'
+                            : '[\n  1, 2, 3\n]'
                         }
+                        disabled={isReadOnly}
+                        className={cn(
+                          'min-h-[120px] font-mono text-sm text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50',
+                          dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
+                        )}
+                        style={{
+                          wordBreak: 'break-word',
+                          whiteSpace: 'pre-wrap',
+                        }}
+                        onDrop={(e) => handleDrop(e, assignment.id)}
+                        onDragOver={(e) => handleDragOver(e, assignment.id)}
+                        onDragLeave={(e) => handleDragLeave(e, assignment.id)}
                       />
-                    </div>
-
-                    <div className='flex flex-col gap-1.5'>
-                      <div className='flex items-center justify-between'>
-                        <Label className='text-small'>Value</Label>
-                        {assignment.type === 'boolean' && (
-                          <Tooltip.Root>
-                            <Tooltip.Trigger asChild>
-                              <button
-                                type='button'
-                                className='flex size-[12px] shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-                                onClick={() =>
-                                  setManualBooleanModes((prev) => ({
-                                    ...prev,
-                                    [assignment.id]: !isManualBoolean,
-                                  }))
-                                }
-                                disabled={isReadOnly}
-                                aria-label={
-                                  isManualBoolean ? 'Switch to selector' : 'Switch to manual value'
-                                }
-                              >
-                                <ArrowLeftRight
-                                  className={cn(
-                                    'h-[12px]! w-[12px]!',
-                                    isManualBoolean
-                                      ? 'text-[var(--text-primary)]'
-                                      : 'text-[var(--text-secondary)]'
-                                  )}
-                                />
-                              </button>
-                            </Tooltip.Trigger>
-                            <Tooltip.Content side='top'>
-                              <p>
-                                {isManualBoolean ? 'Switch to selector' : 'Switch to manual value'}
-                              </p>
-                            </Tooltip.Content>
-                          </Tooltip.Root>
+                      <div
+                        ref={(el) => {
+                          if (el) overlayRefs.current[assignment.id] = el
+                        }}
+                        className={cn(
+                          'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
+                          !isReadOnly && 'pointer-events-none'
                         )}
+                        style={{ scrollbarWidth: 'none' }}
+                      >
+                        <div className='w-full whitespace-pre-wrap break-words'>
+                          {formatDisplayText(assignment.value || '', {
+                            accessiblePrefixes,
+                            highlightAll: !accessiblePrefixes,
+                            workflowSearchHighlight: valueSearchHighlight,
+                          })}
+                        </div>
                       </div>
-                      {assignment.type === 'boolean' && !isManualBoolean ? (
-                        <Combobox
-                          options={BOOLEAN_OPTIONS}
-                          value={assignment.value ?? ''}
-                          onChange={(v) =>
-                            !isReadOnly && updateAssignment(assignment.id, { value: v })
-                          }
-                          placeholder='Select value'
-                          disabled={isReadOnly}
-                          overlayContent={
-                            booleanLabelHighlight ? (
-                              <span className='truncate text-[var(--text-primary)]'>
-                                {formatDisplayText(assignment.value ?? '', {
-                                  workflowSearchHighlight: booleanLabelHighlight,
-                                })}
-                              </span>
-                            ) : undefined
+                    </div>
+                  ) : (
+                    <div className='relative'>
+                      <Input
+                        ref={(el) => {
+                          if (el) valueInputRefs.current[assignment.id] = el
+                        }}
+                        name='value'
+                        value={assignment.value || ''}
+                        onChange={(e) =>
+                          handleValueInputChange(
+                            assignment.id,
+                            e.target.value,
+                            e.target.selectionStart ?? undefined
+                          )
+                        }
+                        onKeyDown={handleKeyDown}
+                        onFocus={() => {
+                          if (!isReadOnly && !assignment.value?.trim()) {
+                            setActiveFieldId(assignment.id)
+                            setCursorPosition(0)
+                            setShowTags(true)
                           }
-                        />
-                      ) : assignment.type === 'object' || assignment.type === 'array' ? (
-                        <div className='relative'>
-                          <Textarea
-                            ref={(el) => {
-                              if (el) valueInputRefs.current[assignment.id] = el
-                            }}
-                            value={assignment.value || ''}
-                            onChange={(e) =>
-                              handleValueInputChange(
-                                assignment.id,
-                                e.target.value,
-                                e.target.selectionStart ?? undefined
-                              )
-                            }
-                            onKeyDown={handleKeyDown}
-                            onFocus={() => {
-                              if (!isReadOnly && !assignment.value?.trim()) {
-                                setActiveFieldId(assignment.id)
-                                setCursorPosition(0)
-                                setShowTags(true)
-                              }
-                            }}
-                            onScroll={(e) => {
-                              const overlay = overlayRefs.current[assignment.id]
-                              if (overlay) {
-                                overlay.scrollTop = e.currentTarget.scrollTop
-                                overlay.scrollLeft = e.currentTarget.scrollLeft
-                              }
-                            }}
-                            placeholder={
-                              assignment.type === 'object'
-                                ? '{\n  "key": "value"\n}'
-                                : '[\n  1, 2, 3\n]'
-                            }
-                            disabled={isReadOnly}
-                            className={cn(
-                              'min-h-[120px] font-mono text-sm text-transparent caret-foreground [letter-spacing:inherit] placeholder:text-muted-foreground/50',
-                              dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
-                            )}
-                            style={{
-                              wordBreak: 'break-word',
-                              whiteSpace: 'pre-wrap',
-                            }}
-                            onDrop={(e) => handleDrop(e, assignment.id)}
-                            onDragOver={(e) => handleDragOver(e, assignment.id)}
-                            onDragLeave={(e) => handleDragLeave(e, assignment.id)}
-                          />
-                          <div
-                            ref={(el) => {
-                              if (el) overlayRefs.current[assignment.id] = el
-                            }}
-                            className={cn(
-                              'absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm',
-                              !isReadOnly && 'pointer-events-none'
-                            )}
-                            style={{ scrollbarWidth: 'none' }}
-                          >
-                            <div className='w-full whitespace-pre-wrap break-words'>
-                              {formatDisplayText(assignment.value || '', {
-                                accessiblePrefixes,
-                                highlightAll: !accessiblePrefixes,
-                                workflowSearchHighlight: valueSearchHighlight,
-                              })}
-                            </div>
-                          </div>
-                        </div>
-                      ) : (
-                        <div className='relative'>
-                          <Input
-                            ref={(el) => {
-                              if (el) valueInputRefs.current[assignment.id] = el
-                            }}
-                            name='value'
-                            value={assignment.value || ''}
-                            onChange={(e) =>
-                              handleValueInputChange(
+                        }}
+                        onScroll={(e) =>
+                          syncOverlayScroll(assignment.id, e.currentTarget.scrollLeft)
+                        }
+                        onPaste={() =>
+                          setTimeout(() => {
+                            const input = valueInputRefs.current[assignment.id]
+                            if (input)
+                              syncOverlayScroll(
                                 assignment.id,
-                                e.target.value,
-                                e.target.selectionStart ?? undefined
+                                (input as HTMLInputElement).scrollLeft
                               )
-                            }
-                            onKeyDown={handleKeyDown}
-                            onFocus={() => {
-                              if (!isReadOnly && !assignment.value?.trim()) {
-                                setActiveFieldId(assignment.id)
-                                setCursorPosition(0)
-                                setShowTags(true)
-                              }
-                            }}
-                            onScroll={(e) =>
-                              syncOverlayScroll(assignment.id, e.currentTarget.scrollLeft)
-                            }
-                            onPaste={() =>
-                              setTimeout(() => {
-                                const input = valueInputRefs.current[assignment.id]
-                                if (input)
-                                  syncOverlayScroll(
-                                    assignment.id,
-                                    (input as HTMLInputElement).scrollLeft
-                                  )
-                              }, 0)
-                            }
-                            placeholder={`${assignment.type} value`}
-                            disabled={isReadOnly}
-                            autoComplete='off'
-                            className={cn(
-                              'allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit]',
-                              dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
-                            )}
-                            onDrop={(e) => handleDrop(e, assignment.id)}
-                            onDragOver={(e) => handleDragOver(e, assignment.id)}
-                            onDragLeave={(e) => handleDragLeave(e, assignment.id)}
-                          />
-                          <div
-                            ref={(el) => {
-                              if (el) overlayRefs.current[assignment.id] = el
-                            }}
-                            className={cn(
-                              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
-                              !isReadOnly && 'pointer-events-none'
-                            )}
-                            style={{ scrollbarWidth: 'none' }}
-                          >
-                            <div
-                              className='w-full whitespace-pre'
-                              style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
-                            >
-                              {formatDisplayText(
-                                assignment.value || '',
-                                accessiblePrefixes
-                                  ? {
-                                      accessiblePrefixes,
-                                      workflowSearchHighlight: valueSearchHighlight,
-                                    }
-                                  : {
-                                      highlightAll: true,
-                                      workflowSearchHighlight: valueSearchHighlight,
-                                    }
-                              )}
-                            </div>
-                          </div>
+                          }, 0)
+                        }
+                        placeholder={`${assignment.type} value`}
+                        disabled={isReadOnly}
+                        autoComplete='off'
+                        className={cn(
+                          'allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground [letter-spacing:inherit]',
+                          dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
+                        )}
+                        onDrop={(e) => handleDrop(e, assignment.id)}
+                        onDragOver={(e) => handleDragOver(e, assignment.id)}
+                        onDragLeave={(e) => handleDragLeave(e, assignment.id)}
+                      />
+                      <div
+                        ref={(el) => {
+                          if (el) overlayRefs.current[assignment.id] = el
+                        }}
+                        className={cn(
+                          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-sans text-sm',
+                          !isReadOnly && 'pointer-events-none'
+                        )}
+                        style={{ scrollbarWidth: 'none' }}
+                      >
+                        <div
+                          className='w-full whitespace-pre'
+                          style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
+                        >
+                          {formatDisplayText(
+                            assignment.value || '',
+                            accessiblePrefixes
+                              ? {
+                                  accessiblePrefixes,
+                                  workflowSearchHighlight: valueSearchHighlight,
+                                }
+                              : {
+                                  highlightAll: true,
+                                  workflowSearchHighlight: valueSearchHighlight,
+                                }
+                          )}
                         </div>
-                      )}
-
-                      {showTags && activeFieldId === assignment.id && (
-                        <TagDropdown
-                          visible={showTags}
-                          onSelect={handleTagSelect}
-                          blockId={blockId}
-                          activeSourceBlockId={activeSourceBlockId}
-                          inputValue={assignment.value || ''}
-                          cursorPosition={cursorPosition}
-                          onClose={() => setShowTags(false)}
-                          inputRef={
-                            {
-                              current: valueInputRefs.current[assignment.id] || null,
-                            } as React.RefObject<HTMLTextAreaElement | HTMLInputElement>
-                          }
-                        />
-                      )}
+                      </div>
                     </div>
-                  </div>
-                )}
-              </div>
+                  )}
+
+                  {showTags && activeFieldId === assignment.id && (
+                    <TagDropdown
+                      visible={showTags}
+                      onSelect={handleTagSelect}
+                      blockId={blockId}
+                      activeSourceBlockId={activeSourceBlockId}
+                      inputValue={assignment.value || ''}
+                      cursorPosition={cursorPosition}
+                      onClose={() => setShowTags(false)}
+                      inputRef={
+                        {
+                          current: valueInputRefs.current[assignment.id] || null,
+                        } as React.RefObject<HTMLTextAreaElement | HTMLInputElement>
+                      }
+                    />
+                  )}
+                </div>
+              </CollapsibleCard>
             )
           })}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index 6b2ee09e620..61ca1967060 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -5,15 +5,16 @@ import {
   Badge,
   Button,
   Code,
+  CollapsibleCard,
   Combobox,
   type ComboboxOption,
   calculateGutterWidth,
-  cn,
   getCodeEditorProps,
   highlight,
   Input,
   Label,
   languages,
+  OverflowText,
 } from '@sim/emcn'
 import { Plus, Trash, X } from '@sim/emcn/icons'
 import Editor from 'react-simple-code-editor'
@@ -83,67 +84,6 @@ const STRINGS = {
   emptyState: 'No variables yet',
 }
 
-interface VariableHeaderProps {
-  variable: Variable
-  index: number
-  isCollapsed: boolean
-  onToggleCollapse: () => void
-  onRemove: () => void
-  readOnly: boolean
-}
-
-function VariableHeader({
-  variable,
-  index,
-  isCollapsed,
-  onToggleCollapse,
-  onRemove,
-  readOnly,
-}: VariableHeaderProps) {
-  function handleHeaderKeyDown(e: React.KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault()
-      onToggleCollapse()
-    }
-  }
-
-  return (
-    <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
-      onClick={onToggleCollapse}
-      onKeyDown={handleHeaderKeyDown}
-      role='button'
-      tabIndex={0}
-      aria-expanded={!isCollapsed}
-      aria-controls={`variable-content-${variable.id}`}
-    >
-      <div className='flex min-w-0 flex-1 items-center gap-2'>
-        <span className='block truncate text-[var(--text-tertiary)] text-sm'>
-          {variable.name || `Variable ${index + 1}`}
-        </span>
-        {variable.name && (
-          <Badge variant='type' size='sm'>
-            {variable.type}
-          </Badge>
-        )}
-      </div>
-      <Button
-        variant='ghost-destructive'
-        onClick={(e) => {
-          e.stopPropagation()
-          onRemove()
-        }}
-        className='h-auto p-0'
-        disabled={readOnly}
-        aria-label={`Delete ${variable.name || `variable ${index + 1}`}`}
-      >
-        <Trash style={{ width: `${ICON_SIZE}px`, height: `${ICON_SIZE}px` }} />
-        <span className='sr-only'>Delete Variable</span>
-      </Button>
-    </div>
-  )
-}
-
 interface VariableValueInputProps {
   variable: Variable
   onUpdate: (variableId: string, field: 'name' | 'value' | 'type', value: any) => void
@@ -491,69 +431,81 @@ export function Variables({ readOnly = false }: VariablesProps) {
           <div className='h-full overflow-y-auto overflow-x-hidden'>
             <div className='w-full max-w-full space-y-2 overflow-hidden'>
               {workflowVariables.map((variable, index) => (
-                <div
+                <CollapsibleCard
                   key={variable.id}
-                  className={cn(
-                    'rounded-sm border border-[var(--border-1)] bg-[var(--surface-1)]',
-                    (collapsedById[variable.id] ?? false) ? 'overflow-hidden' : 'overflow-visible'
-                  )}
-                >
-                  <VariableHeader
-                    variable={variable}
-                    index={index}
-                    isCollapsed={collapsedById[variable.id] ?? false}
-                    onToggleCollapse={() => toggleCollapsed(variable.id)}
-                    onRemove={() => handleRemoveVariable(variable.id)}
-                    readOnly={readOnly}
-                  />
-
-                  {!(collapsedById[variable.id] ?? false) && (
-                    <div
-                      id={`variable-content-${variable.id}`}
-                      className='flex flex-col gap-1.5 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'
+                  className='bg-[var(--surface-1)]'
+                  title={
+                    <span className='flex min-w-0 items-center gap-2'>
+                      <OverflowText
+                        label={variable.name || `Variable ${index + 1}`}
+                        focusTarget='nearest-interactive'
+                      />
+                      {variable.name && (
+                        <Badge variant='type' size='sm'>
+                          {variable.type}
+                        </Badge>
+                      )}
+                    </span>
+                  }
+                  collapsed={collapsedById[variable.id] ?? false}
+                  onToggleCollapse={() => toggleCollapsed(variable.id)}
+                  contentProps={{ id: `variable-content-${variable.id}`, className: 'gap-1.5' }}
+                  actions={
+                    <Button
+                      variant='ghost-destructive'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleRemoveVariable(variable.id)
+                      }}
+                      className='h-auto p-0'
+                      disabled={readOnly}
+                      aria-label={`Delete ${variable.name || `variable ${index + 1}`}`}
                     >
-                      <div className='flex flex-col gap-1'>
-                        <Label className='text-small'>{STRINGS.labels.name}</Label>
-                        <Input
-                          name='name'
-                          autoComplete='off'
-                          value={localNames[variable.id] ?? variable.name}
-                          onChange={(e) => handleVariableNameChange(variable.id, e.target.value)}
-                          onBlur={() => handleVariableNameBlur(variable.id)}
-                          onKeyDown={handleVariableNameKeyDown}
-                          placeholder={STRINGS.placeholders.name}
-                          disabled={readOnly}
-                        />
-                        {nameErrors[variable.id] && (
-                          <p className='text-[var(--text-error)] text-xs' role='alert'>
-                            {nameErrors[variable.id]}
-                          </p>
-                        )}
-                      </div>
-
-                      <div className='space-y-1'>
-                        <Label className='text-small'>{STRINGS.labels.type}</Label>
-                        <Combobox
-                          options={TYPE_OPTIONS}
-                          value={variable.type}
-                          onChange={(value) => handleUpdateVariable(variable.id, 'type', value)}
-                          disabled={readOnly}
-                        />
-                      </div>
-
-                      <div className='space-y-1'>
-                        <Label className='text-small'>{STRINGS.labels.value}</Label>
-                        <div className='relative'>
-                          <VariableValueInput
-                            variable={variable}
-                            onUpdate={handleUpdateVariable}
-                            readOnly={readOnly}
-                          />
-                        </div>
-                      </div>
+                      <Trash style={{ width: `${ICON_SIZE}px`, height: `${ICON_SIZE}px` }} />
+                      <span className='sr-only'>Delete Variable</span>
+                    </Button>
+                  }
+                >
+                  <div className='flex flex-col gap-1'>
+                    <Label className='text-small'>{STRINGS.labels.name}</Label>
+                    <Input
+                      name='name'
+                      autoComplete='off'
+                      value={localNames[variable.id] ?? variable.name}
+                      onChange={(e) => handleVariableNameChange(variable.id, e.target.value)}
+                      onBlur={() => handleVariableNameBlur(variable.id)}
+                      onKeyDown={handleVariableNameKeyDown}
+                      placeholder={STRINGS.placeholders.name}
+                      disabled={readOnly}
+                    />
+                    {nameErrors[variable.id] && (
+                      <p className='text-[var(--text-error)] text-xs' role='alert'>
+                        {nameErrors[variable.id]}
+                      </p>
+                    )}
+                  </div>
+
+                  <div className='space-y-1'>
+                    <Label className='text-small'>{STRINGS.labels.type}</Label>
+                    <Combobox
+                      options={TYPE_OPTIONS}
+                      value={variable.type}
+                      onChange={(value) => handleUpdateVariable(variable.id, 'type', value)}
+                      disabled={readOnly}
+                    />
+                  </div>
+
+                  <div className='space-y-1'>
+                    <Label className='text-small'>{STRINGS.labels.value}</Label>
+                    <div className='relative'>
+                      <VariableValueInput
+                        variable={variable}
+                        onUpdate={handleUpdateVariable}
+                        readOnly={readOnly}
+                      />
                     </div>
-                  )}
-                </div>
+                  </div>
+                </CollapsibleCard>
               ))}
             </div>
           </div>
diff --git a/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx b/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx
index 48c2002f869..2a46d78eaef 100644
--- a/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx
+++ b/packages/emcn/src/components/collapsible-card/collapsible-card.test.tsx
@@ -23,33 +23,44 @@ afterEach(() => {
 })
 
 describe('CollapsibleCard', () => {
-  it('toggles controlled content by click, Enter and Space and forwards root attributes', () => {
-    function Example() {
-      const [collapsed, setCollapsed] = useState(true)
-      return (
-        <CollapsibleCard
-          title='Condition'
-          data-filter-id='condition-1'
-          collapsed={collapsed}
-          onToggleCollapse={() => setCollapsed((value) => !value)}
-        >
-          <input aria-label='Value' defaultValue='Example' />
-        </CollapsibleCard>
+  it.each([false, true])(
+    'toggles controlled content and links its body (animated: %s)',
+    (animated) => {
+      function Example() {
+        const [collapsed, setCollapsed] = useState(true)
+        return (
+          <CollapsibleCard
+            title='Condition'
+            animated={animated}
+            contentProps={{ id: 'condition-fields' }}
+            data-filter-id='condition-1'
+            collapsed={collapsed}
+            onToggleCollapse={() => setCollapsed((value) => !value)}
+          >
+            <input aria-label='Value' defaultValue='Example' />
+          </CollapsibleCard>
+        )
+      }
+      mount(<Example />)
+      const card = container!.querySelector('[data-filter-id="condition-1"]')!
+      const trigger = card.querySelector<HTMLElement>('[role="button"]')!
+      expect(trigger.getAttribute('aria-expanded')).toBe('false')
+      expect(trigger.getAttribute('aria-controls')).toBe('condition-fields')
+      expect(card.querySelector('input')).toBeNull()
+      act(() => trigger.click())
+      expect(trigger.getAttribute('aria-expanded')).toBe('true')
+      expect(card.querySelector('#condition-fields input')?.getAttribute('aria-label')).toBe(
+        'Value'
       )
+      expect(card.querySelector('input')?.value).toBe('Example')
+      act(() =>
+        trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      )
+      expect(card.querySelector('input')).toBeNull()
+      act(() => trigger.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true })))
+      expect(card.querySelector('input')).not.toBeNull()
     }
-    mount(<Example />)
-    const card = container!.querySelector('[data-filter-id="condition-1"]')!
-    const trigger = card.querySelector<HTMLElement>('[role="button"]')!
-    expect(trigger.getAttribute('aria-expanded')).toBe('false')
-    expect(card.querySelector('input')).toBeNull()
-    act(() => trigger.click())
-    expect(trigger.getAttribute('aria-expanded')).toBe('true')
-    expect(card.querySelector('input')?.value).toBe('Example')
-    act(() => trigger.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
-    expect(card.querySelector('input')).toBeNull()
-    act(() => trigger.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true })))
-    expect(card.querySelector('input')).not.toBeNull()
-  })
+  )
 
   it('keeps enabled and disabled actions outside the collapse target', () => {
     const toggle = vi.fn()
diff --git a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
index 7dbc6a76b8a..a2e9a640c68 100644
--- a/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
+++ b/packages/emcn/src/components/collapsible-card/collapsible-card.tsx
@@ -3,6 +3,7 @@
 import type * as React from 'react'
 import { cn } from '../../lib/cn'
 import { handleKeyboardActivation } from '../../lib/keyboard'
+import { Expandable, ExpandableContent } from '../expandable/expandable'
 import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-text'
 
 export interface CollapsibleCardProps
@@ -15,6 +16,10 @@ export interface CollapsibleCardProps
   actions?: React.ReactNode
   collapsed: boolean
   onToggleCollapse: () => void
+  /** Animate expansion using the shared Expandable height transition. */
+  animated?: boolean
+  /** Native body attributes and layout, including an ID linked from the trigger. */
+  contentProps?: React.HTMLAttributes<HTMLDivElement>
   /** Body content, shown when expanded. */
   children: React.ReactNode
 }
@@ -36,10 +41,23 @@ export function CollapsibleCard({
   actions,
   collapsed,
   onToggleCollapse,
+  animated = false,
+  contentProps,
   children,
   className,
   ...props
 }: CollapsibleCardProps) {
+  const content = (
+    <div
+      {...contentProps}
+      className={cn(
+        'flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5',
+        contentProps?.className
+      )}
+    >
+      {children}
+    </div>
+  )
   return (
     <div
       {...props}
@@ -54,6 +72,7 @@ export function CollapsibleCard({
           role='button'
           tabIndex={0}
           aria-expanded={!collapsed}
+          aria-controls={contentProps?.id}
           className={cn(
             'flex min-w-0 flex-1 cursor-pointer items-center gap-2 px-2.5 py-[5px]',
             actions && 'pr-2'
@@ -89,10 +108,12 @@ export function CollapsibleCard({
           </div>
         )}
       </div>
-      {!collapsed && (
-        <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
-          {children}
-        </div>
+      {animated ? (
+        <Expandable expanded={!collapsed}>
+          <ExpandableContent>{content}</ExpandableContent>
+        </Expandable>
+      ) : (
+        !collapsed && content
       )}
     </div>
   )