From e3590bc0c1438fd0e4c302a6581a76174163fa02 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 26 Jun 2025 17:58:21 +0800
Subject: [PATCH] fix: tool selector size

---
 .../plugins/plugin-detail-panel/tool-selector/index.tsx      | 2 +-
 web/app/components/workflow/block-selector/tabs.tsx          | 2 +-
 web/app/components/workflow/block-selector/tool-picker.tsx   | 5 +++--
 web/app/components/workflow/block-selector/tools.tsx         | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index db5c2b7854..b9f55387e3 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -293,7 +293,7 @@ const ToolSelector: FC<Props> = ({
                   <div className='flex flex-col gap-1'>
                     <div className='system-sm-semibold flex h-6 items-center text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
                     <ToolPicker
-                      panelClassName='w-[328px]'
+                      panelClassName='w-[400px]'
                       placement='bottom'
                       offset={offset}
                       trigger={
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 2ff36f4552..c9913da1fa 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -74,7 +74,7 @@ const Tabs: FC<TabsProps> = ({
       {
         activeTab === TabsEnum.Tools && (
           <AllTools
-            className='w-[315px]'
+            className='w-[400px]'
             searchText={searchText}
             onSelect={onSelect}
             tags={tags}
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 69800231b5..135e333a41 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -151,7 +151,7 @@ const ToolPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className={cn('relative min-h-20 w-[356px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm', panelClassName)}>
+        <div className={cn('relative min-h-20 w-[400px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm', panelClassName)}>
           <div className='p-2 pb-1'>
             <SearchBox
               search={searchText}
@@ -163,12 +163,13 @@ const ToolPicker: FC<Props> = ({
               supportAddCustomTool={supportAddCustomTool}
               onAddedCustomTool={handleAddedCustomTool}
               onShowAddCustomCollectionModal={showEditCustomCollectionModal}
+              inputClassName='grow'
 
             />
           </div>
           <AllTools
             className='mt-1'
-            toolContentClassName='max-w-[360px]'
+            toolContentClassName='max-w-[100%]'
             tags={tags}
             searchText={searchText}
             onSelect={handleSelect}
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 86893652af..14568fb1d7 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -95,7 +95,7 @@ const Blocks = ({
   const toolRefs = useRef({})
 
   return (
-    <div className={classNames('p-1 max-w-[320px]', className)}>
+    <div className={classNames('p-1 max-w-[100%]', className)}>
       {
         !tools.length && !showWorkflowEmpty && (
           <div className='flex h-[22px] items-center px-3 text-xs font-medium text-text-tertiary'>{t('workflow.tabs.noResult')}</div>