From e911a4e719d3fc632c229c026d479ce8a834bd2b Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 8 Jul 2025 15:28:22 +0800
Subject: [PATCH] fix: Update button styles and improve file size validation in
 breadcrumb and item components

---
 .../file-list/header/breadcrumbs/bucket.tsx            |  7 ++++---
 .../file-list/header/breadcrumbs/index.tsx             |  4 ++--
 .../online-drive/file-list/header/breadcrumbs/item.tsx |  5 +++--
 .../data-source/online-drive/file-list/list/item.tsx   |  2 +-
 .../datasets/list/new-dataset-card/index.tsx           | 10 +++++-----
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
index d18087c075..a9d2e769ad 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
@@ -34,7 +34,7 @@ const Bucket = ({
       >
         <button
           type='button'
-          className='flex size-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
+          className='flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
           onClick={handleBackToBucketList}
         >
           <BucketsGray />
@@ -44,16 +44,17 @@ const Bucket = ({
       <button
         type='button'
         className={cn(
-          'rounded-md px-[5px] py-1',
+          'max-w-full shrink truncate rounded-md px-[5px] py-1',
           isActive ? 'system-sm-medium text-text-secondary' : 'system-sm-regular text-text-tertiary',
           !disabled && 'hover:bg-state-base-hover',
         )}
         disabled={disabled}
         onClick={handleClickItem}
+        title={bucketName}
       >
         {bucketName}
       </button>
-      {showSeparator && <span className='system-xs-regular text-divider-deep'>/</span>}
+      {showSeparator && <span className='system-xs-regular shrink-0 text-divider-deep'>/</span>}
     </>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx
index 81cbeb08e1..a77ee0ee7a 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx
@@ -66,7 +66,7 @@ const Breadcrumbs = ({
   }, [dataSourceStore, prefix])
 
   return (
-    <div className='flex grow items-center py-1'>
+    <div className='flex grow items-center overflow-hidden py-1'>
       {showSearchResult && (
         <div className='system-sm-medium text-test-secondary px-[5px] py-1'>
           {t('datasetPipeline.onlineDrive.breadcrumbs.searchResult', {
@@ -81,7 +81,7 @@ const Breadcrumbs = ({
         </div>
       )}
       {!showSearchResult && !isRoot && (
-        <div className='flex items-center gap-x-0.5'>
+        <div className='flex w-full items-center gap-x-0.5 overflow-hidden'>
           {bucket && (
             <Bucket
               bucketName={bucket}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
index 92e98b30b3..2117bb3ace 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
@@ -28,16 +28,17 @@ const BreadcrumbItem = ({
       <button
         type='button'
         className={cn(
-          'rounded-md px-[5px] py-1',
+          'max-w-full shrink truncate rounded-md px-[5px] py-1',
           isActive ? 'system-sm-medium text-text-secondary' : 'system-sm-regular text-text-tertiary',
           !disabled && 'hover:bg-state-base-hover',
         )}
         disabled={disabled}
         onClick={handleClickItem}
+        title={name}
       >
         {name}
       </button>
-      {showSeparator && <span className='system-xs-regular text-divider-deep'>/</span>}
+      {showSeparator && <span className='system-xs-regular shrink-0 text-divider-deep'>/</span>}
     </>
   )
 }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
index 247f8c21c7..0f81c680e8 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
@@ -85,7 +85,7 @@ const Item = ({
           >
             {file.displayName}
           </span>
-          {!isFolder && file.size && (
+          {!isFolder && typeof file.size === 'number' && (
             <span className='system-xs-regular shrink-0 text-text-tertiary'>{formatFileSize(file.size)}</span>
           )}
         </div>
diff --git a/web/app/components/datasets/list/new-dataset-card/index.tsx b/web/app/components/datasets/list/new-dataset-card/index.tsx
index b268f25a3d..cc84c9a334 100644
--- a/web/app/components/datasets/list/new-dataset-card/index.tsx
+++ b/web/app/components/datasets/list/new-dataset-card/index.tsx
@@ -14,16 +14,16 @@ const CreateAppCard = () => {
   return (
     <div className='flex h-[166px] flex-col gap-y-0.5 rounded-xl bg-background-default-dimmed'>
       <div className='flex grow flex-col items-center justify-center p-2'>
-        <Option
-          href={'/datasets/create-from-pipeline'}
-          Icon={RiFunctionAddLine}
-          text={t('dataset.createFromPipeline')}
-        />
         <Option
           href={'/datasets/create'}
           Icon={RiAddLine}
           text={t('dataset.createDataset')}
         />
+        <Option
+          href={'/datasets/create-from-pipeline'}
+          Icon={RiFunctionAddLine}
+          text={t('dataset.createFromPipeline')}
+        />
       </div>
       <div className='border-t-[0.5px] border-divider-subtle p-2'>
         <Option