From 2ace9ae4e4cb7da5bfc1ea34635dc695133fc16b Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Sun, 23 Feb 2025 19:35:10 +0800
Subject: [PATCH] fix: add responsive layout for file uploader in datasets
 (#14159)

---
 .../datasets/create/file-uploader/index.tsx   |  2 +-
 .../datasets/create/step-one/index.module.css |  4 ++--
 .../datasets/create/step-one/index.tsx        | 23 +++++++++++++++----
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index e42a24cfef..5a64c319cd 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -243,7 +243,7 @@ const FileUploader = ({
   }, [handleDrop])
 
   return (
-    <div className="mb-5 w-[640px]">
+    <div className="mb-5 max-w-[640px]">
       {!hideUpload && (
         <input
           ref={fileUploader}
diff --git a/web/app/components/datasets/create/step-one/index.module.css b/web/app/components/datasets/create/step-one/index.module.css
index bb8dd9b895..d479722904 100644
--- a/web/app/components/datasets/create/step-one/index.module.css
+++ b/web/app/components/datasets/create/step-one/index.module.css
@@ -14,7 +14,7 @@
 }
 
 .dataSourceItem {
-  @apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
+  @apply w-full box-border relative flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   font-weight: 500;
@@ -64,7 +64,7 @@
 }
 
 .datasetIcon {
-  @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
+  @apply flex shrink-0 mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
   background-color: #F5FAFF;
   background-image: url(../assets/file.svg);
   background-size: 16px;
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 45dda51795..629ed8b015 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -137,7 +137,7 @@ const StepOne = ({
             }
             {
               shouldShowDataSourceTypeList && (
-                <div className='flex items-center mb-8 flex-wrap gap-4'>
+                <div className='grid grid-cols-3 mb-8 gap-4'>
                   <div
                     className={cn(
                       s.dataSourceItem,
@@ -153,7 +153,12 @@ const StepOne = ({
                     }}
                   >
                     <span className={cn(s.datasetIcon)} />
-                    {t('datasetCreation.stepOne.dataSourceType.file')}
+                    <span
+                      title={t('datasetCreation.stepOne.dataSourceType.file')}
+                      className='truncate'
+                    >
+                      {t('datasetCreation.stepOne.dataSourceType.file')}
+                    </span>
                   </div>
                   <div
                     className={cn(
@@ -170,7 +175,12 @@ const StepOne = ({
                     }}
                   >
                     <span className={cn(s.datasetIcon, s.notion)} />
-                    {t('datasetCreation.stepOne.dataSourceType.notion')}
+                    <span
+                      title={t('datasetCreation.stepOne.dataSourceType.notion')}
+                      className='truncate'
+                    >
+                      {t('datasetCreation.stepOne.dataSourceType.notion')}
+                    </span>
                   </div>
                   <div
                     className={cn(
@@ -181,7 +191,12 @@ const StepOne = ({
                     onClick={() => changeType(DataSourceType.WEB)}
                   >
                     <span className={cn(s.datasetIcon, s.web)} />
-                    {t('datasetCreation.stepOne.dataSourceType.web')}
+                    <span
+                      title={t('datasetCreation.stepOne.dataSourceType.web')}
+                      className='truncate'
+                    >
+                      {t('datasetCreation.stepOne.dataSourceType.web')}
+                    </span>
                   </div>
                 </div>
               )