refactor(credential-selector): enhance layout with overflow handling for better UI responsiveness

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}

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,

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

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> = {