From 98ada405321a6cff85dc98904db93de4a88113b1 Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Mon, 3 Mar 2025 16:06:41 +0800
Subject: [PATCH] fix: improve layout in dataset selection component (#14756)

---
 .../configuration/dataset-config/select-dataset/index.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index ad012a7d94..9a31435c9c 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -132,11 +132,11 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                   toggleSelect(item)
                 }}
               >
-                <div className='mr-1 flex items-center'>
+                <div className='mr-1 flex items-center overflow-hidden'>
                   <div className={cn('mr-2', !item.embedding_available && 'opacity-30')}>
                     <TypeIcon type="upload_file" size='md' />
                   </div>
-                  <div className={cn('max-w-[200px] text-[13px] font-medium text-text-secondary overflow-hidden text-ellipsis whitespace-nowrap', !item.embedding_available && 'opacity-30 !max-w-[120px]')}>{item.name}</div>
+                  <div className={cn('max-w-[200px] text-[13px] font-medium text-text-secondary truncate', !item.embedding_available && 'opacity-30 !max-w-[120px]')}>{item.name}</div>
                   {!item.embedding_available && (
                     <span className='ml-1 shrink-0 px-1 border border-divider-deep rounded-md text-text-tertiary text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
                   )}
@@ -144,13 +144,14 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
                 {
                   item.indexing_technique && (
                     <Badge
+                      className='shrink-0'
                       text={formatIndexingTechniqueAndMethod(item.indexing_technique, item.retrieval_model_dict?.search_method)}
                     />
                   )
                 }
                 {
                   item.provider === 'external' && (
-                    <Badge text={t('dataset.externalTag')} />
+                    <Badge className='shrink-0' text={t('dataset.externalTag')} />
                   )
                 }
               </div>