From 570b644a7e1890c0476f5447a6f38e2d29e6839e Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 22 Aug 2025 16:49:28 +0800
Subject: [PATCH] refactor(header, option-card): improve layout and
 responsiveness by adjusting flex properties and adding title attributes

---
 .../data-source-options/option-card.tsx                  | 9 ++++++---
 .../create-from-pipeline/data-source/base/header.tsx     | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
index 04c8e08e9c..7853805631 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
@@ -22,17 +22,20 @@ const OptionCard = ({
   return (
     <div
       className={cn(
-        'flex items-center gap-2 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-3 shadow-shadow-shadow-3',
+        'flex cursor-pointer items-center gap-2 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-3 shadow-shadow-shadow-3',
         selected
           ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-inset ring-components-option-card-option-selected-border'
           : 'hover:bg-components-option-card-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs',
       )}
       onClick={onClick}
     >
-      <div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border bg-background-default-dodge p-1.5'>
+      <div className='flex size-8 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border bg-background-default-dodge p-1.5'>
         <DatasourceIcon iconUrl={iconUrl} />
       </div>
-      <div className={cn('system-sm-medium text-text-secondary', selected && 'text-primary')}>
+      <div
+        className={cn('system-sm-medium line-clamp-2 grow text-text-secondary', selected && 'text-primary')}
+        title={label}
+      >
         {label}
       </div>
     </div>
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 7b99526e7c..ef8932ba24 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
@@ -22,8 +22,8 @@ const Header = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center gap-x-2'>
-      <div className='flex grow items-center gap-x-1 overflow-hidden'>
+    <div className='flex items-center justify-between gap-x-2'>
+      <div className='flex items-center gap-x-1 overflow-hidden'>
         <CredentialSelector
           {...rest}
         />