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]/components/find-bar/find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
index ceb2b0b709b..6ec4de4377e 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
@@ -129,7 +129,8 @@ export const FindBar = memo(function FindBar({
             type='button'
             variant='ghost'
             size='icon'
-            className='size-6 shrink-0'
+            iconSize='compact'
+            className='shrink-0'
             aria-label={showReplace ? 'Hide replace' : 'Show replace'}
             aria-expanded={showReplace}
             onClick={() => setShowReplace((visible) => !visible)}
@@ -179,7 +180,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Previous match'
           title='Previous match (Shift+Enter)'
           disabled={!navEnabled}
@@ -191,7 +193,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Next match'
           title='Next match (Enter)'
           disabled={!navEnabled}
@@ -203,7 +206,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Close find'
           title='Close (Esc)'
           onClick={onClose}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
index a3f9e23198d..8313c2c549e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
@@ -106,7 +106,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Previous match'
               disabled={!result?.matches}
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={() => step('back')}
             >
               <ArrowUp className='size-[13px]' />
@@ -117,7 +118,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Next match'
               disabled={!result?.matches}
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={() => step('forward')}
             >
               <ArrowDown className='size-[13px]' />
@@ -127,7 +129,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               variant='ghost-secondary'
               size='sm'
               aria-label='Close find bar'
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={dismiss}
             >
               <X className='size-[13px]' />
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 18b04cfd5b2..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
@@ -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'
@@ -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. */}
@@ -730,7 +724,8 @@ export function WorkflowSidebarBody({
                                 'noopener,noreferrer'
                               )
                             }
-                            className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
+                            iconSize='compact-fixed'
+                            className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
                           >
                             <SquareArrowUpRight className='size-[12px]' />
                           </Button>
@@ -837,23 +832,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/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index c42c236d1c3..4bd3f1c6c00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -36,7 +36,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
 const ACTION_BUTTON_STYLES = [
-  'size-[24px] rounded-md p-0',
+  'rounded-md',
   'border-none bg-transparent text-[var(--text-icon)]',
   'hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]!',
   'dark:hover-hover:bg-[var(--surface-4)]',
@@ -472,6 +472,7 @@ export const ActionBar = memo(
                       }
                       if (canRunBlock) handleRunFromBlockClick()
                     }}
+                    iconSize='compact-fixed'
                     className={cn(getActionButtonStyles('run'), isWorkflowRunning && 'group/run')}
                     disabled={!canStopWorkflow && !canRunBlock}
                   >
@@ -517,6 +518,7 @@ export const ActionBar = memo(
                         collaborativeBatchToggleBlockEnabled([blockId])
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('enabled')}
                     disabled={
                       isWorkflowRunning ||
@@ -553,6 +555,7 @@ export const ActionBar = memo(
                   <DropdownMenuTrigger asChild>
                     <Button
                       variant='ghost'
+                      iconSize='compact-fixed'
                       className={getActionButtonStyles('color')}
                       disabled={
                         isWorkflowRunning ||
@@ -618,6 +621,7 @@ export const ActionBar = memo(
                         collaborativeBatchToggleLocked([blockId])
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('lock')}
                     disabled={isWorkflowRunning || disabled || (isLocked && isParentLocked)}
                   >
@@ -650,6 +654,7 @@ export const ActionBar = memo(
                         handleDuplicateBlock()
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('duplicate')}
                     disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
                   >
@@ -682,6 +687,7 @@ export const ActionBar = memo(
                         )
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('remove')}
                     disabled={
                       isWorkflowRunning ||
@@ -717,6 +723,7 @@ export const ActionBar = memo(
                       collaborativeBatchRemoveBlocks([blockId])
                     }
                   }}
+                  iconSize='compact-fixed'
                   className={getActionButtonStyles('delete')}
                   disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 330a73b990b..e9ae9d5c8a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -212,7 +212,8 @@ function SingleFileSelector({
         aria-label='Remove file'
         type='button'
         variant='ghost'
-        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
+        iconSize='compact'
+        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
         onClick={onClear}
         disabled={isDeleting}
       >
@@ -766,7 +767,8 @@ export function FileUpload({
           aria-label='Remove file'
           type='button'
           variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[4px] size-6 p-0'
+          iconSize='compact'
+          className='-translate-y-1/2 absolute top-1/2 right-[4px]'
           onClick={(e) => handleRemoveFile(file, e)}
           disabled={isDeleting}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index a3da0f3fa49..3dcdd9347b8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -661,7 +661,8 @@ export function MessagesInput({
                               deleteMessage(index)
                             }}
                             disabled={disabled}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Delete message'
                           >
                             <Trash className='size-3' />
@@ -673,7 +674,8 @@ export function MessagesInput({
                               moveMessageUp(index)
                             }}
                             disabled={disabled || index === 0}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Move message up'
                           >
                             <ChevronUp className='size-3' />
@@ -685,7 +687,8 @@ export function MessagesInput({
                               moveMessageDown(index)
                             }}
                             disabled={disabled || index === currentMessages.length - 1}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Move message down'
                           >
                             <ChevronDown className='size-3' />
@@ -699,7 +702,8 @@ export function MessagesInput({
                           addMessageAfter(index)
                         }}
                         disabled={disabled}
-                        className='-mr-1.5 -my-1 size-6 p-0'
+                        iconSize='compact'
+                        className='-mr-1.5 -my-1'
                         aria-label='Add message below'
                       >
                         <Plus className='size-3.5' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index 3130bf0f9ca..720a511c18c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -340,7 +340,8 @@ export function SelectorCombobox({
                 aria-label='Clear selection'
                 type='button'
                 variant='ghost'
-                className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
+                iconSize='compact'
+                className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
                 onClick={handleClear}
               >
                 <X className='size-4 opacity-50 hover-hover:opacity-100' />
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 8edfbb54b46..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
@@ -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,
@@ -470,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'>
@@ -499,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'}
@@ -538,7 +544,7 @@ export function Editor() {
               <Tooltip.Trigger asChild>
                 <Button
                   variant='ghost'
-                  className='p-0'
+                  size='icon'
                   onClick={handleOpenDocs}
                   aria-label='Open documentation'
                 >
@@ -611,7 +617,8 @@ export function Editor() {
                                   type='button'
                                   variant='ghost'
                                   onClick={handleOpenChildWorkflow}
-                                  className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
+                                  iconSize='compact-fixed'
+                                  className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
                                 >
                                   <SquareArrowUpRight className='size-[12px]' />
                                 </Button>
@@ -742,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/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>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index 6a1ce331611..a583115eaa6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -1398,7 +1398,8 @@ function PreviewEditorContent({
                               type='button'
                               variant='ghost'
                               onClick={handleExpandChildWorkflow}
-                              className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
+                              iconSize='compact-fixed'
+                              className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
                             >
                               {isExecutionMode && onDrillDown ? (
                                 <Expand className='size-[12px]' />
diff --git a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
index b24e402e274..8088e98f093 100644
--- a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
+++ b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
@@ -18,7 +18,8 @@ export const bulkActionButtonVariants = cva(
   }
 )
 
-export interface BulkActionButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+export interface BulkActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
   /** Accessible name for the icon action; tooltip content is supplied separately. */
   'aria-label': string
   /**
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
new file mode 100644
index 00000000000..c0b4fc35df3
--- /dev/null
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -0,0 +1,67 @@
+/** @vitest-environment node */
+/** biome-ignore assist/source/organizeImports: Preserve the documented core/external/UI import order. */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Button } from '@sim/emcn'
+
+function normalizeClasses(markup: string) {
+  return markup.replace(
+    /class="([^"]+)"/g,
+    (_, classes: string) => `class="${classes.split(/\s+/).sort().join(' ')}"`
+  )
+}
+
+/** The three existing Button treatments used by compact product actions. */
+const TREATMENTS = [
+  { size: undefined, variant: 'ghost' },
+  { size: 'sm', variant: 'ghost-secondary' },
+  { size: 'icon', variant: 'ghost' },
+] as const
+
+describe('Button iconSize', () => {
+  for (const [iconSize, previousClass] of [
+    ['compact', 'size-6 p-0'],
+    ['compact-fixed', 'size-[24px] p-0'],
+  ] as const) {
+    it.each(TREATMENTS)(
+      `preserves the ${iconSize} treatment with size=$size and variant=$variant`,
+      (treatment) => {
+        const icon = <svg className='size-[14px]' strokeWidth={1.55} aria-hidden='true' />
+        const before = renderToStaticMarkup(
+          <Button
+            {...treatment}
+            type='button'
+            aria-label='Previous match'
+            className={`${previousClass} shrink-0`}
+          >
+            {icon}
+          </Button>
+        )
+        const after = renderToStaticMarkup(
+          <Button
+            {...treatment}
+            type='button'
+            aria-label='Previous match'
+            iconSize={iconSize}
+            className='shrink-0'
+          >
+            {icon}
+          </Button>
+        )
+        expect(normalizeClasses(after)).toBe(normalizeClasses(before))
+      }
+    )
+  }
+
+  it('allows explicit padding and consumer width to take precedence', () => {
+    const markup = renderToStaticMarkup(
+      <Button iconSize='compact-fixed' iconPadding='sm' className='w-[40px]!' aria-label='Run' />
+    )
+    expect(markup).toContain('size-[24px]')
+    expect(markup).toContain('w-[40px]!')
+    expect(markup).toContain('p-1')
+    expect(markup).not.toContain('p-0')
+    expect(markup).not.toContain('iconSize')
+    expect(markup).not.toContain('iconPadding')
+  })
+})
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 4ad21bc4a37..bc2d2c6ef66 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -50,6 +50,10 @@ const buttonVariants = cva(
         md: 'px-2 py-1.5 text-[length:12px]',
         icon: 'size-[20px] rounded-sm p-0 [&_svg]:[stroke-width:1.25]',
       },
+      iconSize: {
+        compact: 'size-6 p-0',
+        'compact-fixed': 'size-[24px] p-0',
+      },
       iconPadding: {
         sm: 'p-1',
         md: 'p-1.5',
@@ -75,6 +79,15 @@ const buttonVariants = cva(
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
+  /**
+   * Square icon-action geometry without changing the selected size's typography,
+   * corner radius, icon stroke or color. `compact` follows the spacing scale
+   * (24px at the default root font size); `compact-fixed` stays at 24px.
+   * Both remove padding; an explicit iconPadding or className can override it.
+   * Omit to retain the selected size's geometry.
+   * @example <Button variant='ghost' iconSize='compact' aria-label='Remove'><X /></Button>
+   */
+  iconSize?: VariantProps<typeof buttonVariants>['iconSize']
   /**
    * Symmetric padding for icon actions whose content or layout determines their size.
    * Preserves the selected size's typography, corner radius and icon stroke.
@@ -85,11 +98,11 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconPadding, ...props }, ref) => {
+  ({ className, variant, size, iconSize, iconPadding, ...props }, ref) => {
     return (
       <button
         ref={ref}
-        className={cn(buttonVariants({ variant, size, iconPadding }), className)}
+        className={cn(buttonVariants({ variant, size, iconSize, iconPadding }), className)}
         {...props}
       />
     )
diff --git a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
index 806f128a179..0a466fc0544 100644
--- a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
+++ b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
@@ -26,7 +26,8 @@ export const composerActionButtonVariants = cva('rounded-full p-0', {
   defaultVariants: { size: 'md', active: true },
 })
 
-export interface ComposerActionButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+export interface ComposerActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
   /** Accessible name for the caller's icon action. */
   'aria-label': string
   /** 28px by default; `sm` retains compact chat's 22px geometry and hover treatment. */
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..4b15d867f80 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 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
+          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,
diff --git a/packages/workflow-renderer/src/note/note-block-view.tsx b/packages/workflow-renderer/src/note/note-block-view.tsx
index d47a556d391..6b71def6fb5 100644
--- a/packages/workflow-renderer/src/note/note-block-view.tsx
+++ b/packages/workflow-renderer/src/note/note-block-view.tsx
@@ -1058,7 +1058,8 @@ export function NoteBlockView({
                       event.stopPropagation()
                       onExpandedChange(!isExpanded)
                     }}
-                    className='nodrag nopan nowheel pointer-events-none ml-1 size-[24px] shrink-0 rounded-md border-none bg-transparent p-0 text-current opacity-0 transition-[background-color,color,opacity,transform] duration-150 hover-hover:bg-current/10 hover-hover:opacity-100 active:scale-[0.96] group-hover:pointer-events-auto group-hover:opacity-70 group-data-[node-selected]:pointer-events-auto group-data-[node-selected]:opacity-70'
+                    iconSize='compact-fixed'
+                    className='nodrag nopan nowheel pointer-events-none ml-1 shrink-0 rounded-md border-none bg-transparent text-current opacity-0 transition-[background-color,color,opacity,transform] duration-150 hover-hover:bg-current/10 hover-hover:opacity-100 active:scale-[0.96] group-hover:pointer-events-auto group-hover:opacity-70 group-data-[node-selected]:pointer-events-auto group-data-[node-selected]:opacity-70'
                   >
                     <span className='relative size-[14px]'>
                       <Expand