From 3f65117007f39e1e63f9f4b35dbc0e5b3f6c4572 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Wed, 16 Jul 2025 11:28:17 +0800
Subject: [PATCH] fix: style

---
 .../authorize/add-api-key-button.tsx          |  2 +-
 .../authorize/add-oauth-button.tsx            | 21 +++++++++-------
 .../plugins/plugin-auth/authorize/index.tsx   | 20 +++++++++------
 .../plugins/plugin-auth/plugin-auth.tsx       |  7 ++++--
 .../_base/components/workflow-panel/index.tsx | 25 ++++++++-----------
 5 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
index ad15a37d5c..4de5110e65 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
@@ -24,7 +24,7 @@ const AddApiKeyButton = ({
   return (
     <>
       <Button
-        className='w-0 grow'
+        className='w-full'
         variant={buttonVariant}
         onClick={() => setIsApiKeyModalOpen(true)}
         disabled={disabled}
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index a2e9339d33..f9061a6045 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -162,7 +162,7 @@ const AddOAuthButton = ({
 
       return 'default'
     }
- else {
+    else {
       if (is_oauth_custom_client_enabled)
         return 'custom'
 
@@ -170,8 +170,6 @@ const AddOAuthButton = ({
     }
   }, [isConfigured, is_oauth_custom_client_enabled])
 
-  console.log('__auth_client__', __auth_client__)
-
   return (
     <>
       {
@@ -179,22 +177,27 @@ const AddOAuthButton = ({
           <Button
             variant={buttonVariant}
             className={cn(
-              'w-0 grow px-0 py-0 hover:bg-components-button-primary-bg',
+              'w-full py-0 pl-0.5 pr-0 hover:bg-components-button-primary-bg',
               className,
             )}
             disabled={disabled}
             onClick={handleOAuth}
           >
             <div className={cn(
-              'flex h-full grow items-center justify-center rounded-l-lg hover:bg-components-button-primary-bg-hover',
+              'flex h-full w-0 grow items-center justify-center rounded-l-lg hover:bg-components-button-primary-bg-hover',
               buttonLeftClassName,
             )}>
-              {buttonText}
+              <div
+                className='truncate'
+                title={buttonText}
+              >
+                {buttonText}
+              </div>
               {
                 is_oauth_custom_client_enabled && (
                   <Badge
                     className={cn(
-                      'ml-1',
+                      'ml-1 mr-0.5',
                       buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface',
                     )}
                   >
@@ -204,7 +207,7 @@ const AddOAuthButton = ({
               }
             </div>
             <div className={cn(
-              'h-4 w-[1px] bg-text-primary-on-surface opacity-[0.15]',
+              'h-4 w-[1px] shrink-0 bg-text-primary-on-surface opacity-[0.15]',
               dividerClassName,
             )}></div>
             <div
@@ -228,7 +231,7 @@ const AddOAuthButton = ({
             variant={buttonVariant}
             onClick={() => setIsOAuthSettingsOpen(true)}
             disabled={disabled}
-            className='w-0 grow'
+            className='w-full'
           >
             <RiEqualizer2Line className='mr-0.5 h-4 w-4' />
             {t('plugin.auth.setupOAuth')}
diff --git a/web/app/components/plugins/plugin-auth/authorize/index.tsx b/web/app/components/plugins/plugin-auth/authorize/index.tsx
index 80f1656fb8..0552708e1e 100644
--- a/web/app/components/plugins/plugin-auth/authorize/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/index.tsx
@@ -65,10 +65,12 @@ const Authorize = ({
       <div className='flex items-center space-x-1.5'>
         {
           canOAuth && (
-            <AddOAuthButton
-              {...oAuthButtonProps}
-              disabled={disabled}
-            />
+            <div className='min-w-0 flex-[1]'>
+              <AddOAuthButton
+                {...oAuthButtonProps}
+                disabled={disabled}
+              />
+            </div>
           )
         }
         {
@@ -82,10 +84,12 @@ const Authorize = ({
         }
         {
           canApiKey && (
-            <AddApiKeyButton
-              {...apiKeyButtonProps}
-              disabled={disabled}
-            />
+            <div className='min-w-0 flex-[1]'>
+              <AddApiKeyButton
+                {...apiKeyButtonProps}
+                disabled={disabled}
+              />
+            </div>
           )
         }
       </div>
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth.tsx b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
index 5056105641..b50cf1e662 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
@@ -3,14 +3,17 @@ import Authorize from './authorize'
 import Authorized from './authorized'
 import type { PluginPayload } from './types'
 import { usePluginAuth } from './hooks/use-plugin-auth'
+import cn from '@/utils/classnames'
 
 type PluginAuthProps = {
   pluginPayload: PluginPayload
   children?: React.ReactNode
+  className?: string
 }
 const PluginAuth = ({
   pluginPayload,
   children,
+  className,
 }: PluginAuthProps) => {
   const {
     isAuthorized,
@@ -21,7 +24,7 @@ const PluginAuth = ({
   } = usePluginAuth(pluginPayload, !!pluginPayload.provider)
 
   return (
-    <>
+    <div className={cn(!isAuthorized && className)}>
       {
         !isAuthorized && (
           <Authorize
@@ -46,7 +49,7 @@ const PluginAuth = ({
       {
         isAuthorized && children
       }
-    </>
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index 01d8e95272..987c013c82 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -232,7 +232,7 @@ const BasePanel: FC<BasePanelProps> = ({
     return buildInTools.find(item => canFindTool(item.id, data.provider_id))
   }, [buildInTools, data.provider_id])
   const showPluginAuth = useMemo(() => {
-    return data.type === BlockEnum.Tool && currCollection?.allow_delete && !currCollection.is_team_authorization
+    return data.type === BlockEnum.Tool && currCollection?.allow_delete
   }, [currCollection, data.type])
   const handleAuthorizationItemClick = useCallback((credential_id: string) => {
     handleNodeDataUpdate({
@@ -378,16 +378,25 @@ const BasePanel: FC<BasePanelProps> = ({
           {
             showPluginAuth && (
               <PluginAuth
+                className='px-4 pb-2'
                 pluginPayload={{
                   provider: currCollection?.name || '',
                   category: AuthCategory.tool,
                 }}
               >
-                <div className='pl-4'>
+                <div className='flex items-center justify-between pl-4 pr-3'>
                   <Tab
                     value={tabType}
                     onChange={setTabType}
                   />
+                  <AuthorizedInNode
+                    pluginPayload={{
+                      provider: currCollection?.name || '',
+                      category: AuthCategory.tool,
+                    }}
+                    onAuthorizationItemClick={handleAuthorizationItemClick}
+                    credentialId={data.credential_id}
+                  />
                 </div>
               </PluginAuth>
             )
@@ -399,18 +408,6 @@ const BasePanel: FC<BasePanelProps> = ({
                   value={tabType}
                   onChange={setTabType}
                 />
-                {
-                  currCollection?.allow_delete && (
-                    <AuthorizedInNode
-                      pluginPayload={{
-                        provider: currCollection?.name || '',
-                        category: AuthCategory.tool,
-                      }}
-                      onAuthorizationItemClick={handleAuthorizationItemClick}
-                      credentialId={data.credential_id}
-                    />
-                  )
-                }
               </div>
             )
           }