From f7016fd92218e30d4fccd3957a9d2332c89913e5 Mon Sep 17 00:00:00 2001
From: HyaCinth <88471803+HyaCiovo@users.noreply.github.com>
Date: Fri, 1 Aug 2025 14:18:38 +0800
Subject: [PATCH] chore: Optimize component styles and interactions (#23250)
 (#23251)

---
 .../plugins/marketplace/empty/index.tsx       |  2 +-
 .../block-selector/tool/action-item.tsx       |  1 +
 .../nodes/agent/components/tool-icon.tsx      | 56 ++++++++++---------
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index 0306d5003d..a9cf125a15 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/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',
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index e5e33614b0..4a2ed4a87b 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/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>
diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index 4ff0cd780d..8e6993a78d 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/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}
     >
-      {(() => {
-        if (iconFetchError || !icon)
+      <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" />
+          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
-            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" />
-      })()}
-      {indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
+        })()}
+      </div>
+      {indicator && <Indicator color={indicator} className="absolute -right-[1px] -top-[1px]" />}
     </div>
   </Tooltip>
 })