fix: improve layout in dataset selection component (#14756)

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>