From 83cc3b4710d4b514071d82c39cd8c5085857bcb6 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 22 Aug 2025 14:49:24 +0800
Subject: [PATCH] refactor(credential-selector): enhance layout with overflow
 handling for better UI responsiveness

---
 .../data-source/base/credential-selector/index.tsx            | 2 +-
 .../data-source/base/credential-selector/trigger.tsx          | 4 ++--
 .../create-from-pipeline/data-source/base/header.tsx          | 2 +-
 web/app/components/workflow/block-icon.tsx                    | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
index 0cd0270fc7..0de3879969 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
@@ -47,7 +47,7 @@ const CredentialSelector = ({
         mainAxis: 4,
       }}
     >
-      <PortalToFollowElemTrigger onClick={toggle}>
+      <PortalToFollowElemTrigger onClick={toggle} className='grow overflow-hidden'>
         <Trigger
           currentCredential={currentCredential}
           pluginName={pluginName}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
index 9f70b2f56a..88f47384f3 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
@@ -35,8 +35,8 @@ const Trigger = ({
         name={name}
         size={20}
       />
-      <div className='flex items-center gap-x-1'>
-        <span className='system-md-semibold min-w-0 truncate text-text-secondary'>
+      <div className='flex grow items-center gap-x-1 overflow-hidden'>
+        <span className='system-md-semibold grow truncate text-text-secondary'>
           {t('datasetPipeline.credentialSelector.name', {
             credentialName: name,
             pluginName,
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
index cc1a589b6e..7b99526e7c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx
@@ -23,7 +23,7 @@ const Header = ({
 
   return (
     <div className='flex items-center gap-x-2'>
-      <div className='flex grow items-center gap-x-1'>
+      <div className='flex grow items-center gap-x-1 overflow-hidden'>
         <CredentialSelector
           {...rest}
         />
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index 14dcf3ac81..96eb2c2b5b 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -65,6 +65,7 @@ const getIcon = (type: BlockEnum, className: string) => {
     [BlockEnum.Agent]: <Agent className={className} />,
     [BlockEnum.KnowledgeBase]: <KnowledgeBase className={className} />,
     [BlockEnum.DataSource]: <Datasource className={className} />,
+    [BlockEnum.DataSourceEmpty]: <></>,
   }[type]
 }
 const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {