chore: Optimize component styles and interactions (#23250) (#23251)

web/app/components/workflow/block-selector/tool/action-item.tsx

@@ -34,6 +34,7 @@ const ToolItem: FC<Props> = ({
     <Tooltip
       key={payload.name}
       position='right'
+      needsDelay={false}
       popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
       popupContent={(
         <div>

web/app/components/workflow/nodes/agent/components/tool-icon.tsx

@@ -61,10 +61,11 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
   >
     <div
       className={classNames(
-        'relative flex size-5 items-center justify-center rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge',
+        'relative',
       )}
       ref={containerRef}
     >
+      <div className="flex size-5 items-center justify-center overflow-hidden rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
         {(() => {
           if (iconFetchError || !icon)
             return <Group className="h-3 w-3 opacity-35" />
@@ -91,7 +92,8 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
           }
           return <Group className="h-3 w-3 opacity-35" />
         })()}
-      {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
+      </div>
+      {indicator && <Indicator color={indicator} className="absolute -right-[1px] -top-[1px]" />}
     </div>
   </Tooltip>
 })