fix: style

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}

web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx

@@ -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,
             )}>
+              <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')}

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 && (
+            <div className='min-w-0 flex-[1]'>
               <AddOAuthButton
                 {...oAuthButtonProps}
                 disabled={disabled}
               />
+            </div>
           )
         }
         {
@@ -82,10 +84,12 @@ const Authorize = ({
         }
         {
           canApiKey && (
+            <div className='min-w-0 flex-[1]'>
               <AddApiKeyButton
                 {...apiKeyButtonProps}
                 disabled={disabled}
               />
+            </div>
           )
         }
       </div>

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>
   )
 }
 

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,29 +378,17 @@ const BasePanel: FC<BasePanelProps> = ({
           {
             showPluginAuth && (
               <PluginAuth
+                className='px-4 pb-2'
                 pluginPayload={{
                   provider: currCollection?.name || '',
                   category: AuthCategory.tool,
                 }}
               >
-                <div className='pl-4'>
-                  <Tab
-                    value={tabType}
-                    onChange={setTabType}
-                  />
-                </div>
-              </PluginAuth>
-            )
-          }
-          {
-            !showPluginAuth && (
                 <div className='flex items-center justify-between pl-4 pr-3'>
                   <Tab
                     value={tabType}
                     onChange={setTabType}
                   />
-                {
-                  currCollection?.allow_delete && (
                   <AuthorizedInNode
                     pluginPayload={{
                       provider: currCollection?.name || '',
@@ -409,8 +397,17 @@ const BasePanel: FC<BasePanelProps> = ({
                     onAuthorizationItemClick={handleAuthorizationItemClick}
                     credentialId={data.credential_id}
                   />
+                </div>
+              </PluginAuth>
             )
           }
+          {
+            !showPluginAuth && (
+              <div className='flex items-center justify-between pl-4 pr-3'>
+                <Tab
+                  value={tabType}
+                  onChange={setTabType}
+                />
               </div>
             )
           }