fix: Update button styles and improve file size validation in breadcrumb and item components

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

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}

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

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>

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