From 63b223a52a4018429315faf50ab5b8d4f4085dec Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Sat, 19 Sep 2026 14:25:49 -0700
Subject: [PATCH 1/4] improvement(ui): share additional-field disclosures

---
 .../workflow-sidebar/workflow-sidebar.tsx     | 24 ++-----
 .../panel/components/editor/editor.tsx        | 34 +++++-----
 .../field-divider/field-divider.dom.test.tsx  | 64 +++++++++++++++++++
 .../field-divider/field-divider.tsx           | 40 +++++++++++-
 packages/emcn/src/components/index.ts         |  7 +-
 5 files changed, 130 insertions(+), 39 deletions(-)
 create mode 100644 packages/emcn/src/components/field-divider/field-divider.dom.test.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 2c53382bf54..5ccf9b973e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -7,7 +7,7 @@ import {
   ChipInput,
   type ComboboxOptionGroup,
   cn,
-  DashedDividerLine,
+  FieldDisclosure,
   FieldDivider,
   Label,
   Loader,
@@ -16,7 +16,7 @@ import {
   Tooltip,
   toast,
 } from '@sim/emcn'
-import { ArrowLeft, ChevronDown, SquareArrowUpRight, X } from '@sim/emcn/icons'
+import { ArrowLeft, SquareArrowUpRight, X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
@@ -838,23 +838,9 @@ export function WorkflowSidebarBody({
             )}
             {selectedWorkflowId && (
               <>
-                <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                  <DashedDividerLine className='flex-1' />
-                  <button
-                    type='button'
-                    onClick={() => setShowAdvanced((v) => !v)}
-                    className='flex items-center gap-1.5 whitespace-nowrap text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
-                  >
-                    {showAdvanced ? 'Hide additional fields' : 'Show additional fields'}
-                    <ChevronDown
-                      className={cn(
-                        'size-[14px] transition-transform duration-200',
-                        showAdvanced && 'rotate-180'
-                      )}
-                    />
-                  </button>
-                  <DashedDividerLine className='flex-1' />
-                </div>
+                <FieldDisclosure expanded={showAdvanced} onClick={() => setShowAdvanced((v) => !v)}>
+                  {showAdvanced ? 'Hide additional fields' : 'Show additional fields'}
+                </FieldDisclosure>
                 {showAdvanced && (
                   <>
                     <InputMappingSection
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 10e9b3ad76e..61bd02da17b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -1,11 +1,17 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, DashedDividerLine, FieldDivider, Loader, Tooltip } from '@sim/emcn'
+import {
+  Button,
+  DashedDividerLine,
+  FieldDisclosure,
+  FieldDivider,
+  Loader,
+  Tooltip,
+} from '@sim/emcn'
 import {
   BookOpen,
   Check,
-  ChevronDown,
   ChevronUp,
   Lock,
   Pencil,
@@ -743,22 +749,14 @@ export function Editor() {
                     })}
 
                     {hasAdditionalFields && canEditBlock && (
-                      <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
-                        <DashedDividerLine className='flex-1' />
-                        <button
-                          type='button'
-                          onClick={handleToggleAdditionalFields}
-                          className='flex items-center gap-1.5 whitespace-nowrap text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
-                        >
-                          {displayAdvancedOptions
-                            ? 'Hide additional fields'
-                            : 'Show additional fields'}
-                          <ChevronDown
-                            className={`size-[14px] transition-transform duration-200 ${displayAdvancedOptions ? 'rotate-180' : ''}`}
-                          />
-                        </button>
-                        <DashedDividerLine className='flex-1' />
-                      </div>
+                      <FieldDisclosure
+                        expanded={displayAdvancedOptions}
+                        onClick={handleToggleAdditionalFields}
+                      >
+                        {displayAdvancedOptions
+                          ? 'Hide additional fields'
+                          : 'Show additional fields'}
+                      </FieldDisclosure>
                     )}
                     {hasAdditionalFields && !canEditBlock && displayAdvancedOptions && (
                       <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
diff --git a/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx b/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx
new file mode 100644
index 00000000000..ed3a624673d
--- /dev/null
+++ b/packages/emcn/src/components/field-divider/field-divider.dom.test.tsx
@@ -0,0 +1,64 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { FieldDisclosure } from './field-divider'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+afterEach(() => {
+  act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('FieldDisclosure', () => {
+  it('leaves expansion to the caller and does not submit its surrounding form', () => {
+    const onClick = vi.fn()
+    const onSubmit = vi.fn((event) => event.preventDefault())
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    const render = (expanded: boolean, disabled = false) => (
+      <form onSubmit={onSubmit}>
+        <FieldDisclosure
+          expanded={expanded}
+          disabled={disabled}
+          onClick={onClick}
+          aria-controls='additional-fields'
+        >
+          {expanded ? 'Hide additional fields' : 'Show additional fields'}
+        </FieldDisclosure>
+        <div id='additional-fields' hidden={!expanded}>
+          Additional fields
+        </div>
+      </form>
+    )
+    act(() => root?.render(render(false)))
+    const button = container.querySelector('button')!
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+    expect(button.getAttribute('aria-controls')).toBe('additional-fields')
+    act(() => {
+      button.focus()
+      button.click()
+    })
+    expect(document.activeElement).toBe(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+
+    act(() => root?.render(render(true)))
+    expect(button.getAttribute('aria-expanded')).toBe('true')
+    expect(button.textContent).toBe('Hide additional fields')
+    expect(container.querySelector<HTMLElement>('#additional-fields')?.hidden).toBe(false)
+
+    act(() => root?.render(render(true, true)))
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/emcn/src/components/field-divider/field-divider.tsx b/packages/emcn/src/components/field-divider/field-divider.tsx
index 7408a21360f..731dac9995e 100644
--- a/packages/emcn/src/components/field-divider/field-divider.tsx
+++ b/packages/emcn/src/components/field-divider/field-divider.tsx
@@ -1,4 +1,6 @@
+import { ChevronDown } from '../../icons'
 import { cn } from '../../lib/cn'
+import { Button, type ButtonProps } from '../button/button'
 
 const DASHED_DIVIDER_STYLE = {
   backgroundImage:
@@ -54,4 +56,40 @@ function FieldDivider({ className, subblockMarker = false, ...props }: FieldDivi
   )
 }
 
-export { DashedDividerLine, FieldDivider }
+export interface FieldDisclosureProps
+  extends Pick<ButtonProps, 'onClick' | 'disabled' | 'aria-controls' | 'children'> {
+  expanded: boolean
+}
+
+/**
+ * Controlled disclosure between field groups. The caller owns the label,
+ * expanded state and fields; this supplies the divider lines and rotating chevron.
+ *
+ * @example
+ * <FieldDisclosure expanded={expanded} onClick={onToggle}>
+ *   {expanded ? 'Hide additional fields' : 'Show additional fields'}
+ * </FieldDisclosure>
+ */
+function FieldDisclosure({ expanded, children, ...props }: FieldDisclosureProps) {
+  return (
+    <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
+      <DashedDividerLine className='flex-1' />
+      <Button
+        {...props}
+        type='button'
+        variant='ghost'
+        size={null}
+        aria-expanded={expanded}
+        className='gap-1.5 whitespace-nowrap p-0 text-small'
+      >
+        {children}
+        <ChevronDown
+          className={cn('size-[14px] transition-transform duration-200', expanded && 'rotate-180')}
+        />
+      </Button>
+      <DashedDividerLine className='flex-1' />
+    </div>
+  )
+}
+
+export { DashedDividerLine, FieldDisclosure, FieldDivider }
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 6628b0a2d1b..29607eea0a6 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -153,7 +153,12 @@ export {
   dropdownMenuRowClass,
 } from './dropdown-menu/dropdown-menu'
 export { Expandable, ExpandableContent } from './expandable/expandable'
-export { DashedDividerLine, FieldDivider } from './field-divider/field-divider'
+export {
+  DashedDividerLine,
+  FieldDisclosure,
+  type FieldDisclosureProps,
+  FieldDivider,
+} from './field-divider/field-divider'
 export { Info } from './info/info'
 export {
   InfoCard,

From bdeefd3b9dbb375eebd9739315dd3394dcd9fddd Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Sat, 19 Sep 2026 14:35:37 -0700
Subject: [PATCH 2/4] fix(ui): show keyboard focus on field disclosures

---
 packages/emcn/src/components/field-divider/field-divider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/emcn/src/components/field-divider/field-divider.tsx b/packages/emcn/src/components/field-divider/field-divider.tsx
index 731dac9995e..4b15d867f80 100644
--- a/packages/emcn/src/components/field-divider/field-divider.tsx
+++ b/packages/emcn/src/components/field-divider/field-divider.tsx
@@ -80,7 +80,7 @@ function FieldDisclosure({ expanded, children, ...props }: FieldDisclosureProps)
         variant='ghost'
         size={null}
         aria-expanded={expanded}
-        className='gap-1.5 whitespace-nowrap p-0 text-small'
+        className='gap-1.5 whitespace-nowrap p-0 text-small focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
       >
         {children}
         <ChevronDown

From 956617164eb2cd3a336cf18f06ccaadcec8a763a Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Sat, 19 Sep 2026 17:55:10 -0700
Subject: [PATCH 3/4] improvement(ui): share table sidebar headers (#8048)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
---
 .../column-config-sidebar.tsx                 | 19 ++++------
 .../enrichments-sidebar/enrichment-config.tsx | 28 ++++++--------
 .../enrichments-sidebar.tsx                   | 36 +++++++-----------
 .../table-sidebar-header.tsx                  | 37 +++++++++++++++++++
 .../workflow-sidebar/workflow-sidebar.tsx     | 28 ++++++--------
 5 files changed, 80 insertions(+), 68 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
index abf3f9391a0..2ad4ebc773b 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
@@ -25,6 +25,10 @@ import {
   FieldError,
   RequiredLabel,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import { useAddTableColumn, useUpdateColumn } from '@/hooks/queries/tables'
 import { SelectOptionsEditor } from '../select-field'
 import { columnTypeOptionsForTable } from './column-types'
@@ -263,19 +267,12 @@ function ColumnConfigBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <h2 className='text-[var(--text-primary)] text-small'>Configure column</h2>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
         {/* `disabled` on the fieldset reaches every native control inside,
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
index f411281d21e..e158e4ab159 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx
@@ -21,6 +21,10 @@ import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib
 import { columnMatchesRef, getColumnId } from '@/lib/table/column-keys'
 import { deriveOutputColumnName } from '@/lib/table/column-naming'
 import { FieldError } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
 import {
   useAddWorkflowGroup,
@@ -232,31 +236,21 @@ export function EnrichmentConfig({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <div className='flex min-w-0 items-center gap-1.5'>
-          <Button
-            variant='ghost'
-            size='sm'
+          <TableSidebarHeaderAction
             onClick={onBack}
-            iconPadding='sm'
-            className='size-7 flex-none'
+            className='flex-none'
             aria-label='Back to enrichments'
           >
             <ArrowLeft className='size-[14px]' />
-          </Button>
+          </TableSidebarHeaderAction>
           <OverflowText label={enrichment.name} className='text-[var(--text-primary)] text-small' />
         </div>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
         <div className='flex flex-col gap-[9.5px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
index 0aebd34cb4c..421055477fc 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx
@@ -1,9 +1,13 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, ChipInput, cn } from '@sim/emcn'
+import { ChipInput, cn } from '@sim/emcn'
 import { Search, X } from '@sim/emcn/icons'
 import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import { ALL_ENRICHMENTS } from '@/enrichments'
 import { getEnrichment } from '@/enrichments/registry'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
@@ -71,19 +75,12 @@ function EnrichmentsSidebarBody({
   if (editGroup && !editEnrichment) {
     return (
       <div className='flex h-full flex-col'>
-        <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+        <TableSidebarHeader>
           <h2 className='text-[var(--text-primary)] text-small'>Enrichment</h2>
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={onClose}
-            iconPadding='sm'
-            className='size-7 flex-none'
-            aria-label='Close'
-          >
+          <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
             <X className='size-[14px]' />
-          </Button>
-        </div>
+          </TableSidebarHeaderAction>
+        </TableSidebarHeader>
         <div className='flex flex-1 items-center justify-center px-6 text-center'>
           <p className='text-[var(--text-tertiary)] text-small'>
             This enrichment ("{editGroup.enrichmentId}") is no longer available. Delete the column
@@ -118,19 +115,12 @@ function EnrichmentsSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <h2 className='text-[var(--text-primary)] text-small'>Enrichments</h2>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='px-2 pt-3'>
         <ChipInput
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
new file mode 100644
index 00000000000..42e90c9fdd2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx
@@ -0,0 +1,37 @@
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+interface TableSidebarHeaderProps {
+  children: ReactNode
+}
+
+export function TableSidebarHeader({ children }: TableSidebarHeaderProps) {
+  return (
+    <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      {children}
+    </div>
+  )
+}
+
+interface TableSidebarHeaderActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string
+}
+
+export const TableSidebarHeaderAction = forwardRef<
+  HTMLButtonElement,
+  TableSidebarHeaderActionProps
+>(({ className, ...props }, ref) => (
+  <Button
+    {...props}
+    ref={ref}
+    variant='ghost'
+    size='sm'
+    iconPadding='sm'
+    className={cn(
+      'size-7 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
+      className
+    )}
+  />
+))
+
+TableSidebarHeaderAction.displayName = 'TableSidebarHeaderAction'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 5ccf9b973e8..e213befae6c 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -46,6 +46,10 @@ import {
   FieldError,
   RequiredLabel,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
+import {
+  TableSidebarHeader,
+  TableSidebarHeaderAction,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header'
 import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { BlockTile } from '@/blocks/block-tile'
 import { useDeployedWorkflowState } from '@/hooks/queries/deployments'
@@ -630,35 +634,25 @@ export function WorkflowSidebarBody({
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex min-h-[48px] items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
+      <TableSidebarHeader>
         <div className='flex min-w-0 items-center gap-1.5'>
           {showBackButton && (
-            <Button
-              variant='ghost'
-              size='sm'
+            <TableSidebarHeaderAction
               onClick={onBack}
-              iconPadding='sm'
-              className='size-7 flex-none'
+              className='flex-none'
               aria-label='Back to enrichments'
             >
               <ArrowLeft className='size-[14px]' />
-            </Button>
+            </TableSidebarHeaderAction>
           )}
           <h2 className='flex min-w-0'>
             <OverflowText label={title} className='text-[var(--text-primary)] text-small' />
           </h2>
         </div>
-        <Button
-          variant='ghost'
-          size='sm'
-          onClick={onClose}
-          iconPadding='sm'
-          className='size-7 flex-none'
-          aria-label='Close'
-        >
+        <TableSidebarHeaderAction onClick={onClose} className='flex-none' aria-label='Close'>
           <X className='size-[14px]' />
-        </Button>
-      </div>
+        </TableSidebarHeaderAction>
+      </TableSidebarHeader>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
         {/* Single-output mode renames this column directly. */}

From 2d56098b9be09edeebde89b2b055bf8d7bffc97b Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com>
Date: Sun, 20 Sep 2026 20:31:46 -0700
Subject: [PATCH 4/4] improvement(ui): use shared sizing for small icon actions
 (#8090)

* improvement(ui): use shared sizing for small icon actions

* fix(ui): inherit the shared unlock icon color

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Mac.localdomain>
---
 .../chat/components/message/components/file-download.tsx  | 2 +-
 .../app/(interfaces)/chat/components/message/message.tsx  | 2 +-
 .../components/panel/components/editor/editor.tsx         | 8 ++++----
 .../components/panel/components/toolbar/toolbar.tsx       | 7 +------
 .../w/[workflowId]/components/panel/panel.tsx             | 4 ++--
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
index 938ea3f2b3c..0e3c40e1f15 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
@@ -254,7 +254,7 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
         variant='ghost-secondary'
         onClick={handleDownloadAll}
         disabled={isDownloading}
-        className='p-0'
+        size='icon'
       >
         {isDownloading ? (
           <Loader className='size-3' animate />
diff --git a/apps/sim/app/(interfaces)/chat/components/message/message.tsx b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
index 9458ed16be7..1b99ccf96cc 100644
--- a/apps/sim/app/(interfaces)/chat/components/message/message.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/message/message.tsx
@@ -274,7 +274,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
                       <Button
                         aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
                         variant='ghost-secondary'
-                        className='p-0'
+                        size='icon'
                         onClick={() => {
                           const contentToCopy =
                             typeof cleanTextContent === 'string'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 61bd02da17b..54e32639e95 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -476,11 +476,11 @@ export function Editor() {
                   {userPermissions.canAdmin && currentBlock.locked && !isAncestorLocked ? (
                     <Button
                       variant='ghost'
-                      className='p-0'
+                      size='icon'
                       onClick={() => collaborativeBatchToggleLocked([currentBlockId!])}
                       aria-label='Unlock block'
                     >
-                      <Unlock className='size-[14px] text-[var(--text-secondary)]' />
+                      <Unlock className='size-[14px]' />
                     </Button>
                   ) : (
                     <div className='flex items-center justify-center'>
@@ -505,7 +505,7 @@ export function Editor() {
                 <Tooltip.Trigger asChild>
                   <Button
                     variant='ghost'
-                    className='p-0'
+                    size='icon'
                     onClick={isRenaming ? handleSaveRename : handleStartRename}
                     disabled={!canEditBlock}
                     aria-label={isRenaming ? 'Save name' : 'Rename block'}
@@ -544,7 +544,7 @@ export function Editor() {
               <Tooltip.Trigger asChild>
                 <Button
                   variant='ghost'
-                  className='p-0'
+                  size='icon'
                   onClick={handleOpenDocs}
                   aria-label='Open documentation'
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 09ede00b538..27f4ee1ed93 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -875,12 +875,7 @@ export const Toolbar = memo(
           <h2 className='text-[var(--text-primary)] text-sm'>Toolbar</h2>
           <div className='flex shrink-0 items-center gap-2'>
             {!isSearchActive ? (
-              <Button
-                variant='ghost'
-                className='p-0'
-                aria-label='Search toolbar'
-                onClick={focusSearch}
-              >
+              <Button variant='ghost' size='icon' aria-label='Search toolbar' onClick={focusSearch}>
                 <Search className='size-[14px]' />
               </Button>
             ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index 5f894cfc5f3..5337e108a8d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -915,7 +915,7 @@ export const Panel = memo(function Panel() {
                     <Button
                       aria-label='New Chat'
                       variant='ghost'
-                      className='p-0'
+                      size='icon'
                       onClick={handleCopilotNewChat}
                     >
                       <Plus className='size-[14px]' />
@@ -928,7 +928,7 @@ export const Panel = memo(function Panel() {
                       }}
                     >
                       <DropdownMenuTrigger asChild>
-                        <Button variant='ghost' className='p-0' aria-label='Chat history'>
+                        <Button variant='ghost' size='icon' aria-label='Chat history'>
                           <BubbleChatDelay className='size-[14px]' />
                         </Button>
                       </DropdownMenuTrigger>