feat: fe mobile responsive next (#1609)

web/app/components/datasets/create/step-three/index.tsx

@@ -5,6 +5,7 @@ import cn from 'classnames'
 import EmbeddingProcess from '../embedding-process'
 
 import s from './index.module.css'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { FullDocumentDetail, createDocumentResponse } from '@/models/datasets'
 
 type StepThreeProps = {
@@ -17,9 +18,12 @@ type StepThreeProps = {
 const StepThree = ({ datasetId, datasetName, indexingType, creationCache }: StepThreeProps) => {
   const { t } = useTranslation()
 
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   return (
     <div className='flex w-full h-full'>
-      <div className={'h-full w-full overflow-y-scroll px-16'}>
+      <div className={'h-full w-full overflow-y-scroll px-6 sm:px-16'}>
         <div className='max-w-[636px]'>
           {!datasetId && (
             <>
@@ -46,13 +50,13 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache }: Step
           />
         </div>
       </div>
-      <div className={cn(s.sideTip)}>
+      {!isMobile && <div className={cn(s.sideTip)}>
         <div className={s.tipCard}>
           <span className={s.icon}/>
           <div className={s.title}>{t('datasetCreation.stepThree.sideTipTitle')}</div>
           <div className={s.content}>{t('datasetCreation.stepThree.sideTipContent')}</div>
         </div>
-      </div>
+      </div>}
     </div>
   )
 }