From bba93017881656f6d47a2809895ac6d246edb97f Mon Sep 17 00:00:00 2001
From: AkaraChen <akarachen@outlook.com>
Date: Fri, 22 Nov 2024 14:09:41 +0800
Subject: [PATCH] fix: layout overflow

---
 web/app/components/datasets/create/index.tsx   |  2 +-
 .../datasets/create/step-three/index.tsx       |  2 +-
 .../datasets/create/top-bar/index.tsx          | 18 ++++++++++++------
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx
index c78fda6953..440e9c0ea2 100644
--- a/web/app/components/datasets/create/index.tsx
+++ b/web/app/components/datasets/create/index.tsx
@@ -121,7 +121,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
     <div className='flex flex-col' style={{ height: 'calc(100vh - 56px)' }}>
       <div className="grow bg-white flex flex-col max-h-full h-full">
         <Topbar activeStepIndex={step - 1} />
-        <div className={step === 1 ? 'block h-full' : 'hidden'}>
+        <div className={step === 1 ? 'block h-full max-h-full overflow-auto' : 'hidden'}>
           <StepOne
             hasConnection={hasConnection}
             onSetting={() => setShowAccountSettingModal({ payload: 'data-source' })}
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index 804a196ed5..85471f4513 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -22,7 +22,7 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache }: Step
   const isMobile = media === MediaType.mobile
 
   return (
-    <div className='flex w-full h-full'>
+    <div className='flex w-full max-h-full h-full overflow-y-auto'>
       <div className={'h-full w-full overflow-y-scroll px-6 sm:px-16'}>
         <div className='max-w-[636px]'>
           {!datasetId && (
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index dc2604c45b..87ed8ed503 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import Link from 'next/link'
+import { useTranslation } from 'react-i18next'
 import { Stepper, type StepperProps } from '../stepper'
 import classNames from '@/utils/classnames'
 
@@ -8,24 +9,29 @@ export type TopbarProps = Pick<StepperProps, 'activeStepIndex'> & {
   className?: string
 }
 
+const STEP_T_MAP: Record<number, string> = {
+  1: 'datasetCreation.steps.one',
+  2: 'datasetCreation.steps.two',
+  3: 'datasetCreation.steps.three',
+}
+
 export const Topbar: FC<TopbarProps> = (props) => {
   const { className, ...rest } = props
+  const { t } = useTranslation()
   return <div className={classNames('flex items-center justify-between relative', className)}>
     <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
       <RiArrowLeftLine className='size-4 mr-2' />
       <p className="text-[#101827] text-[13px] font-semibold uppercase leading-none">
-        Create Knowledge
+        {t('datasetCreation.steps.header.creation')}
       </p>
     </Link>
     <div className={
       'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 absolute'
     }>
       <Stepper
-        steps={[
-          { name: 'Data Source' },
-          { name: 'Document Processing' },
-          { name: 'Execute & Finish' },
-        ]}
+        steps={Array.from({ length: 3 }, (_, i) => ({
+          name: t(STEP_T_MAP[i + 1]),
+        }))}
         {...rest}
       />
     </div>