refactor(emcn): centralize product icon-button padding

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx

@@ -567,7 +567,7 @@ function DetailCodeSection({
               </span>
               <Button
                 variant='ghost'
-                className='p-1!'
+                iconPadding='sm'
                 onClick={goToPreviousMatch}
                 disabled={matchCount === 0}
                 aria-label='Previous match'
@@ -576,7 +576,7 @@ function DetailCodeSection({
               </Button>
               <Button
                 variant='ghost'
-                className='p-1!'
+                iconPadding='sm'
                 onClick={goToNextMatch}
                 disabled={matchCount === 0}
                 aria-label='Next match'
@@ -585,7 +585,7 @@ function DetailCodeSection({
               </Button>
               <Button
                 variant='ghost'
-                className='p-1!'
+                iconPadding='sm'
                 onClick={closeSearch}
                 aria-label='Close search'
               >
@@ -1045,7 +1045,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
               <Button
                 type='button'
                 variant='ghost'
-                className='p-1!'
+                iconPadding='sm'
                 onClick={() => copyTrace(JSON.stringify(traceSpans, null, 2))}
                 aria-label='Copy raw trace'
               >
@@ -1065,7 +1065,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
               <Button
                 type='button'
                 variant='ghost'
-                className='p-1!'
+                iconPadding='sm'
                 onClick={() => setExpandedNodes(new Set(allIds))}
                 aria-label='Expand all'
               >
@@ -1079,7 +1079,7 @@ export const TraceView = memo(function TraceView({ traceSpans, runCostDollars }:
               <Button
                 type='button'
                 variant='ghost'
-                className='p-1!'
+                iconPadding='sm'
                 onClick={() => setExpandedNodes(new Set())}
                 aria-label='Collapse all'
               >

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -233,7 +233,7 @@ export const WorkflowOutputSection = memo(
             </span>
             <Button
               variant='ghost'
-              className='p-1!'
+              iconPadding='sm'
               onClick={goToPreviousMatch}
               disabled={matchCount === 0}
               aria-label='Previous match'
@@ -242,7 +242,7 @@ export const WorkflowOutputSection = memo(
             </Button>
             <Button
               variant='ghost'
-              className='p-1!'
+              iconPadding='sm'
               onClick={goToNextMatch}
               disabled={matchCount === 0}
               aria-label='Next match'
@@ -251,7 +251,7 @@ export const WorkflowOutputSection = memo(
             </Button>
             <Button
               variant='ghost'
-              className='p-1!'
+              iconPadding='sm'
               onClick={closeSearch}
               aria-label='Close search'
             >
@@ -838,7 +838,7 @@ export const LogDetails = memo(function LogDetails({
                       <Tooltip.Trigger asChild>
                         <Button
                           variant='ghost'
-                          className='p-1!'
+                          iconPadding='sm'
                           onClick={() => onRetryExecution?.()}
                           disabled={isRetryPending}
                           aria-label='Retry execution'
@@ -851,7 +851,7 @@ export const LogDetails = memo(function LogDetails({
                   )}
                 <Button
                   variant='ghost'
-                  className='p-1!'
+                  iconPadding='sm'
                   onClick={() => hasPrev && onNavigatePrev?.()}
                   disabled={!hasPrev}
                   aria-label='Previous log'
@@ -860,14 +860,14 @@ export const LogDetails = memo(function LogDetails({
                 </Button>
                 <Button
                   variant='ghost'
-                  className='p-1!'
+                  iconPadding='sm'
                   onClick={() => hasNext && onNavigateNext?.()}
                   disabled={!hasNext}
                   aria-label='Next log'
                 >
                   <ChevronUp className='size-[14px] rotate-180' />
                 </Button>
-                <Button variant='ghost' className='p-1!' onClick={onClose} aria-label='Close'>
+                <Button variant='ghost' iconPadding='sm' onClick={onClose} aria-label='Close'>
                   <X className='size-[14px]' />
                 </Button>
               </div>

apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx

@@ -586,7 +586,8 @@ function ServerDetailView({
                         variant='ghost'
                         aria-label={copiedConfig ? 'Configuration copied' : 'Copy configuration'}
                         onClick={() => handleCopyConfig(server.isPublic, server.name)}
-                        className='-my-1.5 p-1.5!'
+                        iconPadding='md'
+                        className='-my-1.5'
                       >
                         {copiedConfig ? (
                           <Check className='size-[14px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -269,7 +269,8 @@ function ColumnConfigBody({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='size-7 p-1!'
+          iconPadding='sm'
+          className='size-7'
           aria-label='Close'
         >
           <X className='size-[14px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichment-details/enrichment-details.tsx

@@ -364,7 +364,7 @@ export function EnrichmentDetails({
           <div className='flex h-full flex-col px-3.5 pt-3'>
             <div className='flex items-center justify-between'>
               <h2 className='text-[var(--text-primary)] text-sm'>Enrichment Details</h2>
-              <Button variant='ghost' className='p-1!' onClick={onClose} aria-label='Close'>
+              <Button variant='ghost' iconPadding='sm' onClick={onClose} aria-label='Close'>
                 <X className='size-[14px]' />
               </Button>
             </div>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichment-config.tsx

@@ -238,7 +238,8 @@ export function EnrichmentConfig({
             variant='ghost'
             size='sm'
             onClick={onBack}
-            className='size-7 flex-none p-1!'
+            iconPadding='sm'
+            className='size-7 flex-none'
             aria-label='Back to enrichments'
           >
             <ArrowLeft className='size-[14px]' />
@@ -249,7 +250,8 @@ export function EnrichmentConfig({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='size-7 flex-none p-1!'
+          iconPadding='sm'
+          className='size-7 flex-none'
           aria-label='Close'
         >
           <X className='size-[14px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/enrichments-sidebar/enrichments-sidebar.tsx

@@ -77,7 +77,8 @@ function EnrichmentsSidebarBody({
             variant='ghost'
             size='sm'
             onClick={onClose}
-            className='size-7 flex-none p-1!'
+            iconPadding='sm'
+            className='size-7 flex-none'
             aria-label='Close'
           >
             <X className='size-[14px]' />
@@ -123,7 +124,8 @@ function EnrichmentsSidebarBody({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='size-7 flex-none p-1!'
+          iconPadding='sm'
+          className='size-7 flex-none'
           aria-label='Close'
         >
           <X className='size-[14px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx

@@ -78,7 +78,8 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
             variant='ghost'
             size='sm'
             onClick={() => remove(option.id)}
-            className='size-7 shrink-0 p-1!'
+            iconPadding='sm'
+            className='size-7 shrink-0'
             aria-label={`Remove ${option.name || 'option'}`}
           >
             <X className='size-[12px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx

@@ -382,7 +382,8 @@ const FilterRuleRow = memo(function FilterRuleRow({
         variant='ghost'
         size='sm'
         onClick={() => onRemove(rule.id)}
-        className='size-7 shrink-0 p-1!'
+        iconPadding='sm'
+        className='size-7 shrink-0'
         aria-label='Remove filter'
       >
         <X className='size-[12px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx

@@ -637,7 +637,8 @@ export function WorkflowSidebarBody({
               variant='ghost'
               size='sm'
               onClick={onBack}
-              className='size-7 flex-none p-1!'
+              iconPadding='sm'
+              className='size-7 flex-none'
               aria-label='Back to enrichments'
             >
               <ArrowLeft className='size-[14px]' />
@@ -651,7 +652,8 @@ export function WorkflowSidebarBody({
           variant='ghost'
           size='sm'
           onClick={onClose}
-          className='size-7 flex-none p-1!'
+          iconPadding='sm'
+          className='size-7 flex-none'
           aria-label='Close'
         >
           <X className='size-[14px]' />