fix(custom-blocks): stop image icons blowing up on class-sized surfaces (#5878)

TheodoreSpeaks · web-flow · commit 019950870663 · 2026-07-23T04:11:45.000-04:00
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts
@@ -14,9 +14,10 @@ export const SUGGESTION_SURFACE_CLASS =
  */
 export const SUGGESTION_SCROLL_CLASS = 'max-h-[240px] scroll-py-1.5 overflow-y-auto overscroll-none'
 
-/** A selectable row: icon + label, 14px icon in `--text-icon`, truncating label. */
+/** A selectable row: icon + label, 14px icon in `--text-icon`, truncating label. The `img` rules
+ * size custom-block image icons (rendered as `<img>`, so the `svg` rules never reach them). */
 export const SUGGESTION_ITEM_CLASS =
-  'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-left font-medium text-[var(--text-body)] text-caption outline-none transition-colors [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]'
+  'relative flex w-full min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-1.5 text-left font-medium text-[var(--text-body)] text-caption outline-none transition-colors [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)] [&_img]:pointer-events-none [&_img]:size-[14px] [&_img]:shrink-0'
 
 /** A group heading above a run of rows. */
 export const SUGGESTION_GROUP_LABEL_CLASS =
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
@@ -107,13 +107,7 @@ export function ToolCallItem({
   return (
     <div className='flex items-center gap-[6px] pl-6'>
       {BlockIcon && (
-        // Size via inline style: a custom block's image icon carries a trailing
-        // `size-full` that defeats size *classes* (it fills tiled surfaces), so a
-        // class-only size renders the uploaded icon at natural size here.
-        <BlockIcon
-          className='size-[14px] flex-shrink-0'
-          style={{ width: 14, height: 14, ...getBareIconStyle(BlockIcon) }}
-        />
+        <BlockIcon className='size-[14px] flex-shrink-0' style={getBareIconStyle(BlockIcon)} />
       )}
       {isExecuting ? (
         <ShimmerText className='text-[13px] [--shimmer-rest:var(--text-secondary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -332,7 +332,7 @@ const TraceTreeRow = memo(function TraceTreeRow({
         )}
         {!isIterationType(span.type) && (
           <div
-            className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+            className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
             style={{ background: bgColor }}
           >
             {BlockIcon && <BlockIcon className={cn('size-[10px]', iconColorClass(bgColor))} />}
@@ -707,7 +707,7 @@ const TraceDetailPane = memo(function TraceDetailPane({ span }: { span: TraceSpa
       <div className='flex items-start gap-2'>
         {!isIterationType(span.type) && (
           <div
-            className='mt-[2px] flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm'
+            className='mt-[2px] flex size-[18px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
             style={{ background: bgColor }}
           >
             {BlockIcon && <BlockIcon className={cn('size-[12px]', iconColorClass(bgColor))} />}
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
@@ -178,7 +178,7 @@ const TagIcon: React.FC<{
   color: string
 }> = ({ icon, color }) => (
   <div
-    className='flex size-[14px] flex-shrink-0 items-center justify-center rounded'
+    className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded [&_img]:size-full'
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -28,7 +28,7 @@ const TagIcon: React.FC<{
   color: string
 }> = ({ icon, color }) => (
   <div
-    className='flex size-[14px] flex-shrink-0 items-center justify-center rounded'
+    className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded [&_img]:size-full'
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -145,7 +145,7 @@ function ConnectionItem({
         }}
       >
         <div
-          className='relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+          className='[&_img]:!size-full relative flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
           style={{ background: bgColor }}
         >
           {Icon && (
@@ -154,7 +154,7 @@ function ConnectionItem({
                 'transition-transform duration-200',
                 getTileIconColorClass(bgColor),
                 hasFields && 'group-hover:scale-110',
-                '!h-[9px] !w-[9px]'
+                '!size-[9px]'
               )}
             />
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -387,7 +387,7 @@ const TagIcon: React.FC<{
   color: string
 }> = ({ icon, color }) => (
   <div
-    className='flex size-[14px] flex-shrink-0 items-center justify-center rounded'
+    className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded [&_img]:size-full'
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -408,7 +408,7 @@ function createToolIcon(
 ) {
   return (
     <div
-      className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+      className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
       style={{ background: bgColor }}
     >
       <IconComponent className={cn('size-[10px]', getTileIconColorClass(bgColor))} />
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
@@ -373,7 +373,7 @@ export function Editor() {
           <div className='flex min-w-0 flex-1 items-center gap-2'>
             {(blockConfig || isSubflow) && currentBlock?.type !== 'note' && (
               <div
-                className='flex size-[18px] items-center justify-center rounded-sm'
+                className='flex size-[18px] items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
                 style={{ background: isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor }}
               >
                 <IconComponent
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
@@ -130,7 +130,7 @@ const ToolbarItem = memo(function ToolbarItem({
       onKeyDown={handleKeyDown}
     >
       <div
-        className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+        className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
         style={{ background: item.bgColor }}
       >
         {Icon && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -124,7 +124,7 @@ const BlockRow = memo(function BlockRow({
     >
       <div className='flex min-w-0 flex-1 items-center gap-2'>
         <div
-          className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+          className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
           style={{ background: bgColor }}
         >
           {BlockIcon && (
@@ -300,7 +300,7 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+            className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
             style={{ background: bgColor }}
           >
             {BlockIcon && (
@@ -427,7 +427,7 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
       >
         <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
+            className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
             style={{ background: bgColor }}
           >
             {BlockIcon && (
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
@@ -1198,7 +1198,7 @@ function PreviewEditorContent({
       <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
         {block.type !== 'note' && (
           <div
-            className='flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm'
+            className='flex size-[18px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
             style={{ backgroundColor: blockConfig.bgColor }}
           >
             <IconComponent
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -373,7 +373,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
           {!isNoteBlock && (
             <div
-              className='flex size-[24px] flex-shrink-0 items-center justify-center rounded-md'
+              className='flex size-[24px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
               style={{ background: enabled ? blockConfig.bgColor : 'gray' }}
             >
               <IconComponent
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
@@ -21,7 +21,7 @@ export const MemoizedCommandItem = memo(
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
         <div
-          className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
+          className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'
           style={{ background: showColoredIcon ? bgColor : 'transparent' }}
         >
           <Icon
diff --git a/apps/sim/blocks/custom/custom-block-icon.tsx b/apps/sim/blocks/custom/custom-block-icon.tsx
@@ -5,30 +5,32 @@ import { cn } from '@sim/emcn'
 import { Box } from 'lucide-react'
 import type { BlockIcon } from '@/blocks/types'
 
+const cache = new Map<string, BlockIcon>()
+
 /**
  * Build a `BlockIcon` from an uploaded icon image URL. Rendered as an `<img>` so
  * any uploaded PNG/JPEG/SVG works; `className` (size) is forwarded like every
  * other block icon. Cached by URL so the component reference stays stable across
  * the many tiles/nodes that render a custom block.
  */
-const cache = new Map<string, BlockIcon>()
-
 export function makeImageIcon(url: string): BlockIcon {
   const cached = cache.get(url)
   if (cached) return cached
 
-  // Fill the tile so an uploaded image/logo reads at the same footprint as other
-  // blocks' colored tiles, instead of a small glyph floating in a transparent
-  // square. Trailing `size-full` beats a consumer size *class* (twMerge keeps the
-  // last of a conflict group) so a tiled surface (canvas/toolbar/palette) fills;
-  // it loses to a consumer inline `style` (specificity) so a tile-less inline
-  // surface that sizes via `style={{ width, height }}` still renders at its px.
+  /**
+   * `size-full` is only the DEFAULT (fills a fixed-size tile parent when no size
+   * is given); a consumer size class or inline style always wins, so flow
+   * surfaces that render icons at `size-[14px]` get exactly that. Tiled surfaces
+   * (canvas node, toolbar, search modal, …) pass a glyph-size class but want the
+   * image to fill the tile — they opt in with `[&_img]:size-full` on the fixed
+   * wrapper, which out-specifies the size class on the img.
+   */
   const ImageComponent = memo(({ className, style }: SVGProps<SVGSVGElement>) => (
     <img
       src={url}
       alt=''
       style={style}
-      className={cn('rounded-[4px] object-contain', className, 'size-full')}
+      className={cn('size-full rounded-[4px] object-contain', className)}
     />
   ))
   // double-cast-allowed: an <img> renderer must satisfy the SVG-typed BlockIcon slot
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx
@@ -212,7 +212,7 @@ export function WorkflowBlockView({
         >
           <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
             <div
-              className='flex size-[24px] flex-shrink-0 items-center justify-center rounded-md'
+              className='flex size-[24px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
               style={{
                 background: isEnabled ? iconBgColor : 'gray',
               }}

Original file line number	Diff line number	Diff line change
`@@ -178,7 +178,7 @@ const TagIcon: React.FC<{`
`178`	`178`	`color: string`
`179`	`179`	`}> = ({ icon, color }) => (`
`180`	`180`	`<div`
`181`		`- className='flex size-[14px] flex-shrink-0 items-center justify-center rounded'`
	`181`	`+ className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded [&_img]:size-full'`
`182`	`182`	`style={{ background: color }}`
`183`	`183`	`>`
`184`	`184`	`{typeof icon === 'string' ? (`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ const TagIcon: React.FC<{`
`28`	`28`	`color: string`
`29`	`29`	`}> = ({ icon, color }) => (`
`30`	`30`	`<div`
`31`		`- className='flex size-[14px] flex-shrink-0 items-center justify-center rounded'`
	`31`	`+ className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded [&_img]:size-full'`
`32`	`32`	`style={{ background: color }}`
`33`	`33`	`>`
`34`	`34`	`{typeof icon === 'string' ? (`
Original file line number	Diff line number	Diff line change
`@@ -387,7 +387,7 @@ const TagIcon: React.FC<{`
`387`	`387`	`color: string`
`388`	`388`	`}> = ({ icon, color }) => (`
`389`	`389`	`<div`
`390`		`- className='flex size-[14px] flex-shrink-0 items-center justify-center rounded'`
	`390`	`+ className='flex size-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded [&_img]:size-full'`
`391`	`391`	`style={{ background: color }}`
`392`	`392`	`>`
`393`	`393`	`{typeof icon === 'string' ? (`
Original file line number	Diff line number	Diff line change
`@@ -408,7 +408,7 @@ function createToolIcon(`
`408`	`408`	`) {`
`409`	`409`	`return (`
`410`	`410`	`<div`
`411`		`- className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'`
	`411`	`+ className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'`
`412`	`412`	`style={{ background: bgColor }}`
`413`	`413`	`>`
`414`	`414`	`<IconComponent className={cn('size-[10px]', getTileIconColorClass(bgColor))} />`
Original file line number	Diff line number	Diff line change
`@@ -373,7 +373,7 @@ export function Editor() {`
`373`	`373`	`<div className='flex min-w-0 flex-1 items-center gap-2'>`
`374`	`374`	`{(blockConfig \|\| isSubflow) && currentBlock?.type !== 'note' && (`
`375`	`375`	`<div`
`376`		`- className='flex size-[18px] items-center justify-center rounded-sm'`
	`376`	`+ className='flex size-[18px] items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'`
`377`	`377`	`style={{ background: isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor }}`
`378`	`378`	`>`
`379`	`379`	`<IconComponent`
Original file line number	Diff line number	Diff line change
`@@ -130,7 +130,7 @@ const ToolbarItem = memo(function ToolbarItem({`
`130`	`130`	`onKeyDown={handleKeyDown}`
`131`	`131`	`>`
`132`	`132`	`<div`
`133`		`- className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'`
	`133`	`+ className='relative flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm [&_img]:size-full'`
`134`	`134`	`style={{ background: item.bgColor }}`
`135`	`135`	`>`
`136`	`136`	`{Icon && (`