From 3bed0346d7835bc00e4022608aa5d13ca86eb5b0 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 31 Dec 2024 11:51:04 +0800
Subject: [PATCH] fix: choose tools

---
 .../plugins/marketplace/search-box/index.tsx           | 10 ++++++----
 .../block-selector/market-place-plugin/list.tsx        |  6 ++++--
 web/app/components/workflow/block-selector/tabs.tsx    |  1 +
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index 513f8b98ad..61fff2c7a9 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -40,7 +40,7 @@ const SearchBox = ({
         locale={locale}
       />
       <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
-      <div className='grow flex items-center p-1 pl-2'>
+      <div className='relative grow flex items-center p-1 pl-2'>
         <div className='flex items-center mr-2 w-full'>
           <input
             className={cn(
@@ -54,9 +54,11 @@ const SearchBox = ({
           />
           {
             search && (
-              <ActionButton onClick={() => onSearchChange('')}>
-                <RiCloseLine className='w-4 h-4' />
-              </ActionButton>
+              <div className='absolute right-2 top-1/2 -translate-y-1/2'>
+                <ActionButton onClick={() => onSearchChange('')}>
+                  <RiCloseLine className='w-4 h-4' />
+                </ActionButton>
+              </div>
             )
           }
         </div>
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index 540b7d924f..596b6f21c5 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -74,11 +74,13 @@ const List = ({
     )
   }
 
+  const maxWidthClassName = 'max-w-[300px]'
+
   return (
     <>
       {hasRes && (
         <div
-          className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName)}
+          className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName, maxWidthClassName)}
           onClick={handleHeadClick}
         >
           <span>{t('plugin.fromMarketplace')}</span>
@@ -93,7 +95,7 @@ const List = ({
           </Link>
         </div>
       )}
-      <div className='p-1' ref={nextToStickyELemRef}>
+      <div className={cn('p-1', maxWidthClassName)} ref={nextToStickyELemRef}>
         {list.map((item, index) => (
           <Item
             key={index}
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index 1a2217fe49..5404232f93 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -68,6 +68,7 @@ const Tabs: FC<TabsProps> = ({
       {
         activeTab === TabsEnum.Tools && (
           <AllTools
+            className='w-[315px]'
             searchText={searchText}
             onSelect={onSelect}
             tags={tags}