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

web/app/components/plugins/marketplace/empty/index.tsx

@@ -28,7 +28,7 @@ const Empty = ({
           <div
             key={index}
             className={cn(
-              'mb-3 mr-3  h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
+              'mb-3 mr-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
               index % 4 === 3 && 'mr-0',
               index > 11 && 'mb-0',
               lightCard && 'bg-background-default-lighter opacity-75',

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,37 +61,39 @@ 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)
+        {(() => {
+          if (iconFetchError || !icon)
+            return <Group className="h-3 w-3 opacity-35" />
+          if (typeof icon === 'string') {
+            return <img
+              src={icon}
+              alt='tool icon'
+              className={classNames(
+                'size-3.5 h-full w-full object-cover',
+                notSuccess && 'opacity-50',
+              )}
+              onError={() => setIconFetchError(true)}
+            />
+          }
+          if (typeof icon === 'object') {
+            return <AppIcon
+              className={classNames(
+                'size-3.5 h-full w-full object-cover',
+                notSuccess && 'opacity-50',
+              )}
+              icon={icon?.content}
+              background={icon?.background}
+            />
+          }
           return <Group className="h-3 w-3 opacity-35" />
-        if (typeof icon === 'string') {
+        })()}
-          return <img
+      </div>
-            src={icon}
+      {indicator && <Indicator color={indicator} className="absolute -right-[1px] -top-[1px]" />}
-            alt='tool icon'
-            className={classNames(
-              'size-3.5 h-full w-full object-cover',
-              notSuccess && 'opacity-50',
-            )}
-            onError={() => setIconFetchError(true)}
-          />
-        }
-        if (typeof icon === 'object') {
-          return <AppIcon
-            className={classNames(
-              'size-3.5 h-full w-full object-cover',
-              notSuccess && 'opacity-50',
-            )}
-            icon={icon?.content}
-            background={icon?.background}
-          />
-        }
-        return <Group className="h-3 w-3 opacity-35" />
-      })()}
-      {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
     </div>
   </Tooltip>
 })