feat: fe mobile responsive next (#1609)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

   const navigation = useMemo(() => {
     const navs = [
       { name: t('common.appMenus.overview'), href: `/app/${appId}/overview`, icon: ChartBarSquareIcon, selectedIcon: ChartBarSquareSolidIcon },
-      isCurrentWorkspaceManager ? { name: t('common.appMenus.promptEng'), href: `/app/${appId}/configuration`, icon: Cog8ToothIcon, selectedIcon: Cog8ToothSolidIcon } : false,
+      ...(isCurrentWorkspaceManager ? [{ name: t('common.appMenus.promptEng'), href: `/app/${appId}/configuration`, icon: Cog8ToothIcon, selectedIcon: Cog8ToothSolidIcon }] : []),
       { name: t('common.appMenus.apiAccess'), href: `/app/${appId}/develop`, icon: CommandLineIcon, selectedIcon: CommandLineSolidIcon },
       { name: t('common.appMenus.logAndAnn'), href: `/app/${appId}/logs`, icon: DocumentTextIcon, selectedIcon: DocumentTextSolidIcon },
-    ].filter(nav => !!nav)
+    ]
     return navs
   }, [appId, isCurrentWorkspaceManager, t])
 
   return (
     <div className={cn(s.app, 'flex', 'overflow-hidden')}>
       <AppSideBar title={response.name} icon={response.icon} icon_background={response.icon_background} desc={appModeName} navigation={navigation} />
-      <div className="bg-white grow">{children}</div>
+      <div className="bg-white grow overflow-hidden">{children}</div>
     </div>
   )
 }

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx

   }
 
   return (
-    <div className="min-w-max grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
+    <div className="grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
       <AppCard
         appInfo={response}
         cardType="webapp"

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx

   */
   const { t } = await translate(locale, 'app-overview')
   return (
-    <div className="h-full px-16 py-6 overflow-scroll">
+    <div className="h-full px-4 sm:px-16 py-6 overflow-scroll">
       <ApikeyInfoPanel />
       <div className='flex flex-row items-center justify-between mb-4 text-xl text-gray-900'>
         {t('overview.title')}

web/app/(commonLayout)/apps/NewAppDialog.tsx

         <input ref={nameInputRef} className='h-10 px-3 text-sm font-normal bg-gray-100 rounded-lg grow' placeholder={t('app.appNamePlaceholder') || ''}/>
       </div>
 
-      <div className='h-[247px] overflow-y-auto'>
+      <div className='overflow-y-auto'>
         <div className={style.newItemCaption}>
           <h3 className='inline'>{t('app.newApp.captionAppType')}</h3>
           {isWithTemplate && (
         </div>
         {isWithTemplate
           ? (
-            <ul className='grid grid-cols-2 gap-4'>
+            <ul className='grid grid-cols-1 md:grid-cols-2 gap-4'>
               {templates?.data?.map((template, index) => (
                 <li
                   key={index}
           )
           : (
             <>
-              <ul className='grid grid-cols-2 gap-4'>
+              <ul className='grid grid-cols-1 md:grid-cols-2 gap-4'>
                 <li
                   className={classNames(style.listItem, style.selectable, newAppMode === 'chat' && style.selected)}
                   onClick={() => setNewAppMode('chat')}

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

 import { usePathname } from 'next/navigation'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
+import classNames from 'classnames'
+import { useBoolean } from 'ahooks'
 import {
   Cog8ToothIcon,
   // CommandLineIcon,
   // eslint-disable-next-line sort-imports
   PuzzlePieceIcon,
   DocumentTextIcon,
+  PaperClipIcon,
+  QuestionMarkCircleIcon,
 } from '@heroicons/react/24/outline'
 import {
   Cog8ToothIcon as Cog8ToothSolidIcon,
 import Link from 'next/link'
 import s from './style.module.css'
 import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
-import type { RelatedApp } from '@/models/datasets'
+import type { RelatedApp, RelatedAppResponse } from '@/models/datasets'
 import { getLocaleOnClient } from '@/i18n/client'
 import AppSideBar from '@/app/components/app-sidebar'
 import Divider from '@/app/components/base/divider'
 import Indicator from '@/app/components/header/indicator'
 import AppIcon from '@/app/components/base/app-icon'
 import Loading from '@/app/components/base/loading'
+import FloatPopoverContainer from '@/app/components/base/float-popover-container'
 import DatasetDetailContext from '@/context/dataset-detail'
 import { DataSourceType } from '@/models/datasets'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
   params: { datasetId: string }
 }
 
-const LikedItem: FC<{ type?: 'plugin' | 'app'; appStatus?: boolean; detail: RelatedApp }> = ({
+type ILikedItemProps = {
+  type?: 'plugin' | 'app'
+  appStatus?: boolean
+  detail: RelatedApp
+  isMobile: boolean
+}
+
+const LikedItem = ({
   type = 'app',
   appStatus = true,
   detail,
-}) => {
+  isMobile,
+}: ILikedItemProps) => {
   return (
-    <Link className={s.itemWrapper} href={`/app/${detail?.id}/overview`}>
-      <div className={s.iconWrapper}>
+    <Link className={classNames(s.itemWrapper, 'px-0 sm:px-3 justify-center sm:justify-start')} href={`/app/${detail?.id}/overview`}>
+      <div className={classNames(s.iconWrapper, 'mr-0 sm:mr-2')}>
         <AppIcon size='tiny' icon={detail?.icon} background={detail?.icon_background}/>
         {type === 'app' && (
           <div className={s.statusPoint}>
           </div>
         )}
       </div>
-      <div className={s.appInfo}>{detail?.name || '--'}</div>
+      {!isMobile && <div className={s.appInfo}>{detail?.name || '--'}</div>}
     </Link>
   )
 }
   </svg>
 }
 
+type IExtraInfoProps = {
+  isMobile: boolean
+  relatedApps?: RelatedAppResponse
+}
+
+const ExtraInfo = ({ isMobile, relatedApps }: IExtraInfoProps) => {
+  const locale = getLocaleOnClient()
+  const [isShowTips, { toggle: toggleTips, set: setShowTips }] = useBoolean(!isMobile)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    setShowTips(!isMobile)
+  }, [isMobile, setShowTips])
+
+  return <div className='w-full flex flex-col items-center'>
+    <Divider className='mt-5' />
+    {(relatedApps?.data && relatedApps?.data?.length > 0) && (
+      <>
+        {!isMobile && <div className={s.subTitle}>{relatedApps?.total || '--'} {t('common.datasetMenus.relatedApp')}</div>}
+        {isMobile && <div className={classNames(s.subTitle, 'flex items-center justify-center !px-0 gap-1')}>
+          {relatedApps?.total || '--'}
+          <PaperClipIcon className='h-4 w-4 text-gray-700' />
+        </div>}
+        {relatedApps?.data?.map((item, index) => (<LikedItem key={index} isMobile={isMobile} detail={item} />))}
+      </>
+    )}
+    {!relatedApps?.data?.length && (
+      <FloatPopoverContainer
+        placement='bottom-start'
+        open={isShowTips}
+        toggle={toggleTips}
+        isMobile={isMobile}
+        triggerElement={
+          <div className={classNames('h-7 w-7 inline-flex justify-center items-center rounded-lg bg-transparent', isShowTips && '!bg-gray-50')}>
+            <QuestionMarkCircleIcon className='h-4 w-4 flex-shrink-0 text-gray-500' />
+          </div>
+        }
+      >
+        <div className={classNames('mt-5 p-3', isMobile && 'border-[0.5px] border-gray-200 shadow-lg rounded-lg bg-white w-[150px]')}>
+          <div className='flex items-center justify-start gap-2'>
+            <div className={s.emptyIconDiv}>
+              <Squares2X2Icon className='w-3 h-3 text-gray-500' />
+            </div>
+            <div className={s.emptyIconDiv}>
+              <PuzzlePieceIcon className='w-3 h-3 text-gray-500' />
+            </div>
+          </div>
+          <div className='text-xs text-gray-500 mt-2'>{t('common.datasetMenus.emptyTip')}</div>
+          <a
+            className='inline-flex items-center text-xs text-primary-600 mt-2 cursor-pointer'
+            href={`https://docs.dify.ai/${locale === 'zh-Hans' ? 'v/zh-hans' : ''}/application/prompt-engineering`}
+            target='_blank'
+          >
+            <BookOpenIcon className='mr-1' />
+            {t('common.datasetMenus.viewDoc')}
+          </a>
+        </div>
+      </FloatPopoverContainer>
+    )}
+  </div>
+}
+
 const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const {
     children,
   const pathname = usePathname()
   const hideSideBar = /documents\/create$/.test(pathname)
   const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const { data: datasetRes, error, mutate: mutateDatasetRes } = useSWR({
     url: 'fetchDatasetDetail',
     datasetId,
       document.title = `${datasetRes.name || 'Dataset'} - Dify`
   }, [datasetRes])
 
-  const ExtraInfo: FC = () => {
-    const locale = getLocaleOnClient()
-
-    return <div className='w-full'>
-      <Divider className='mt-5' />
-      {relatedApps?.data?.length
-        ? (
-          <>
-            <div className={s.subTitle}>{relatedApps?.total || '--'} {t('common.datasetMenus.relatedApp')}</div>
-            {relatedApps?.data?.map((item, index) => (<LikedItem key={index} detail={item} />))}
-          </>
-        )
-        : (
-          <div className='mt-5 p-3'>
-            <div className='flex items-center justify-start gap-2'>
-              <div className={s.emptyIconDiv}>
-                <Squares2X2Icon className='w-3 h-3 text-gray-500' />
-              </div>
-              <div className={s.emptyIconDiv}>
-                <PuzzlePieceIcon className='w-3 h-3 text-gray-500' />
-              </div>
-            </div>
-            <div className='text-xs text-gray-500 mt-2'>{t('common.datasetMenus.emptyTip')}</div>
-            <a
-              className='inline-flex items-center text-xs text-primary-600 mt-2 cursor-pointer'
-              href={`https://docs.dify.ai/${locale === 'zh-Hans' ? 'v/zh-hans' : ''}/application/prompt-engineering`}
-              target='_blank'
-            >
-              <BookOpenIcon className='mr-1' />
-              {t('common.datasetMenus.viewDoc')}
-            </a>
-          </div>
-        )}
-    </div>
-  }
-
   if (!datasetRes && !error)
     return <Loading />
 
   return (
-    <div className='flex'>
+    <div className='flex overflow-hidden'>
       {!hideSideBar && <AppSideBar
         title={datasetRes?.name || '--'}
         icon={datasetRes?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
         icon_background={datasetRes?.icon_background || '#F5F5F5'}
         desc={datasetRes?.description || '--'}
         navigation={navigation}
-        extraInfo={<ExtraInfo />}
+        extraInfo={<ExtraInfo isMobile={isMobile} relatedApps={relatedApps} />}
         iconType={datasetRes?.data_source_type === DataSourceType.NOTION ? 'notion' : 'dataset'}
       />}
       <DatasetDetailContext.Provider value={{
         dataset: datasetRes,
         mutateDatasetRes: () => mutateDatasetRes(),
       }}>
-        <div className="bg-white grow" style={{ minHeight: 'calc(100vh - 56px)' }}>{children}</div>
+        <div className="bg-white grow overflow-hidden">{children}</div>
       </DatasetDetailContext.Provider>
     </div>
   )

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx

   const { t } = await useTranslation(locale, 'dataset-settings')
 
   return (
-    <div className='bg-white h-full'>
+    <div className='bg-white h-full overflow-y-auto'>
       <div className='px-6 py-3'>
         <div className='mb-1 text-lg font-semibold text-gray-900'>{t('title')}</div>
         <div className='text-sm text-gray-500'>{t('desc')}</div>
       </div>
-      <div>
-        <Form datasetId={datasetId} />
-      </div>
+      <Form datasetId={datasetId} />
     </div>
   )
 }

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/style.module.css

 .itemWrapper {
-  @apply flex items-center w-full h-10 px-3 rounded-lg hover:bg-gray-50 cursor-pointer;
+  @apply flex items-center w-full h-10 rounded-lg hover:bg-gray-50 cursor-pointer;
 }
 .appInfo {
   @apply truncate text-gray-700 text-sm font-normal;
 }
 .iconWrapper {
-  @apply relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-md;
+  @apply relative w-6 h-6 bg-[#D5F5F6] rounded-md;
 }
 .statusPoint {
   @apply flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded;

web/app/(commonLayout)/datasets/ApiServer.tsx

   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center'>
-      <div className='flex items-center mr-2 pl-1.5 pr-1 h-8 bg-white/80 border-[0.5px] border-white rounded-lg'>
-        <div className='mr-0.5 px-1.5 h-5 border border-gray-200 text-[11px] text-gray-500 rounded-md'>{t('appApi.apiServer')}</div>
-        <div className='px-1 w-[248px] text-[13px] font-medium text-gray-800'>{apiBaseUrl}</div>
+    <div className='flex items-center flex-wrap gap-y-2'>
+      <div className='flex items-center mr-2 pl-1.5 pr-1 h-8 bg-white/80 border-[0.5px] border-white rounded-lg leading-5'>
+        <div className='mr-0.5 px-1.5 h-5 border border-gray-200 text-[11px] text-gray-500 rounded-md shrink-0'>{t('appApi.apiServer')}</div>
+        <div className='px-1 truncate w-fit sm:w-[248px] text-[13px] font-medium text-gray-800'>{apiBaseUrl}</div>
         <div className='mx-1 w-[1px] h-[14px] bg-gray-200'></div>
         <CopyFeedback
           content={apiBaseUrl}

web/app/(commonLayout)/datasets/Container.tsx

 
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-gray-100 overflow-y-auto'>
-      <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 h-14 bg-gray-100 z-10'>
+      <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-10 flex-wrap gap-y-2'>
         <TabSlider
           value={activeTab}
           onChange={newActiveTab => setActiveTab(newActiveTab)}
         {activeTab === 'api' && data && <ApiServer apiBaseUrl={data.api_base_url || ''} />}
       </div>
 
-      {activeTab === 'dataset'
-        ? (
-          <>
-            <Datasets containerRef={containerRef} />
-            <DatasetFooter />
-          </>
-        )
-        : (
-          activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />
-        )}
+      {activeTab === 'dataset' && (
+        <>
+          <Datasets containerRef={containerRef} />
+          <DatasetFooter />
+        </>
+      )}
+
+      {activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />}
     </div>
 
   )

web/app/(commonLayout)/datasets/Doc.tsx

   const { locale } = useContext(I18n)
 
   return (
-    <article className='mx-12 pt-16 bg-white rounded-t-xl prose prose-xl'>
+    <article className='mx-1 px-4 sm:mx-12 pt-16 bg-white rounded-t-xl prose prose-xl'>
       {
         locale === 'en'
           ? <TemplateEn apiBaseUrl={apiBaseUrl} />

web/app/components/app-sidebar/basic.tsx

   hoverTip?: string
   textStyle?: { main?: string; extra?: string }
   isExtraInLine?: boolean
+  mode?: 'expand' | 'collapse'
 }
 
 const ApiSvg = <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 </svg>
 
 const WebappSvg = <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14.375 5.45825L7.99998 8.99992M7.99998 8.99992L1.62498 5.45825M7.99998 8.99992L8 16.1249M14.75 12.0439V5.95603C14.75 5.69904 14.75 5.57055 14.7121 5.45595C14.6786 5.35457 14.6239 5.26151 14.5515 5.18299C14.4697 5.09424 14.3574 5.03184 14.1328 4.90704L8.58277 1.8237C8.37007 1.70553 8.26372 1.64645 8.15109 1.62329C8.05141 1.60278 7.9486 1.60278 7.84891 1.62329C7.73628 1.64645 7.62993 1.70553 7.41723 1.8237L1.86723 4.90704C1.64259 5.03184 1.53026 5.09424 1.44847 5.18299C1.37612 5.26151 1.32136 5.35457 1.28786 5.45595C1.25 5.57055 1.25 5.69904 1.25 5.95603V12.0439C1.25 12.3008 1.25 12.4293 1.28786 12.5439C1.32136 12.6453 1.37612 12.7384 1.44847 12.8169C1.53026 12.9056 1.64259 12.968 1.86723 13.0928L7.41723 16.1762C7.62993 16.2943 7.73628 16.3534 7.84891 16.3766C7.9486 16.3971 8.05141 16.3971 8.15109 16.3766C8.26372 16.3534 8.37007 16.2943 8.58277 16.1762L14.1328 13.0928C14.3574 12.968 14.4697 12.9056 14.5515 12.8169C14.6239 12.7384 14.6786 12.6453 14.7121 12.5439C14.75 12.4293 14.75 12.3008 14.75 12.0439Z" stroke="#155EEF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M14.375 5.45825L7.99998 8.99992M7.99998 8.99992L1.62498 5.45825M7.99998 8.99992L8 16.1249M14.75 12.0439V5.95603C14.75 5.69904 14.75 5.57055 14.7121 5.45595C14.6786 5.35457 14.6239 5.26151 14.5515 5.18299C14.4697 5.09424 14.3574 5.03184 14.1328 4.90704L8.58277 1.8237C8.37007 1.70553 8.26372 1.64645 8.15109 1.62329C8.05141 1.60278 7.9486 1.60278 7.84891 1.62329C7.73628 1.64645 7.62993 1.70553 7.41723 1.8237L1.86723 4.90704C1.64259 5.03184 1.53026 5.09424 1.44847 5.18299C1.37612 5.26151 1.32136 5.35457 1.28786 5.45595C1.25 5.57055 1.25 5.69904 1.25 5.95603V12.0439C1.25 12.3008 1.25 12.4293 1.28786 12.5439C1.32136 12.6453 1.37612 12.7384 1.44847 12.8169C1.53026 12.9056 1.64259 12.968 1.86723 13.0928L7.41723 16.1762C7.62993 16.2943 7.73628 16.3534 7.84891 16.3766C7.9486 16.3971 8.05141 16.3971 8.15109 16.3766C8.26372 16.3534 8.37007 16.2943 8.58277 16.1762L14.1328 13.0928C14.3574 12.968 14.4697 12.9056 14.5515 12.8169C14.6239 12.7384 14.6786 12.6453 14.7121 12.5439C14.75 12.4293 14.75 12.3008 14.75 12.0439Z" stroke="#155EEF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
 </svg>
 
 const NotionSvg = <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g clip-path="url(#clip0_6294_13848)">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.287 21.9133L1.70748 18.6999C1.08685 17.9267 0.75 16.976 0.75 15.9974V4.36124C0.75 2.89548 1.92269 1.67923 3.43553 1.57594L15.3991 0.759137C16.2682 0.699797 17.1321 0.930818 17.8461 1.41353L22.0494 4.25543C22.8018 4.76414 23.25 5.59574 23.25 6.48319V19.7124C23.25 21.1468 22.0969 22.3345 20.6157 22.4256L7.3375 23.243C6.1555 23.3158 5.01299 22.8178 4.287 21.9133Z" fill="white"/>
-    <path d="M8.43607 10.1842V10.0318C8.43607 9.64564 8.74535 9.32537 9.14397 9.29876L12.0475 9.10491L16.0628 15.0178V9.82823L15.0293 9.69046V9.6181C15.0293 9.22739 15.3456 8.90501 15.7493 8.88433L18.3912 8.74899V9.12918C18.3912 9.30765 18.2585 9.46031 18.0766 9.49108L17.4408 9.59861V18.0029L16.6429 18.2773C15.9764 18.5065 15.2343 18.2611 14.8527 17.6853L10.9545 11.803V17.4173L12.1544 17.647L12.1377 17.7583C12.0853 18.1069 11.7843 18.3705 11.4202 18.3867L8.43607 18.5195C8.39662 18.1447 8.67758 17.8093 9.06518 17.7686L9.45771 17.7273V10.2416L8.43607 10.1842Z" fill="black"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5062 2.22521L3.5426 3.04201C2.82599 3.09094 2.27051 3.66706 2.27051 4.36136V15.9975C2.27051 16.6499 2.49507 17.2837 2.90883 17.7992L5.48835 21.0126C5.90541 21.5322 6.56174 21.8183 7.24076 21.7765L20.519 20.9591C21.1995 20.9172 21.7293 20.3716 21.7293 19.7125V6.48332C21.7293 6.07557 21.5234 5.69348 21.1777 5.45975L16.9743 2.61784C16.546 2.32822 16.0277 2.1896 15.5062 2.22521ZM4.13585 4.54287C3.96946 4.41968 4.04865 4.16303 4.25768 4.14804L15.5866 3.33545C15.9476 3.30956 16.3063 3.40896 16.5982 3.61578L18.8713 5.22622C18.9576 5.28736 18.9171 5.41935 18.8102 5.42516L6.8129 6.07764C6.44983 6.09739 6.09144 5.99073 5.80276 5.77699L4.13585 4.54287ZM6.25018 8.12315C6.25018 7.7334 6.56506 7.41145 6.9677 7.38952L19.6523 6.69871C20.0447 6.67734 20.375 6.97912 20.375 7.35898V18.8141C20.375 19.2031 20.0613 19.5247 19.6594 19.5476L7.05516 20.2648C6.61845 20.2896 6.25018 19.954 6.25018 19.5312V8.12315Z" fill="black"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.287 21.9133L1.70748 18.6999C1.08685 17.9267 0.75 16.976 0.75 15.9974V4.36124C0.75 2.89548 1.92269 1.67923 3.43553 1.57594L15.3991 0.759137C16.2682 0.699797 17.1321 0.930818 17.8461 1.41353L22.0494 4.25543C22.8018 4.76414 23.25 5.59574 23.25 6.48319V19.7124C23.25 21.1468 22.0969 22.3345 20.6157 22.4256L7.3375 23.243C6.1555 23.3158 5.01299 22.8178 4.287 21.9133Z" fill="white" />
+    <path d="M8.43607 10.1842V10.0318C8.43607 9.64564 8.74535 9.32537 9.14397 9.29876L12.0475 9.10491L16.0628 15.0178V9.82823L15.0293 9.69046V9.6181C15.0293 9.22739 15.3456 8.90501 15.7493 8.88433L18.3912 8.74899V9.12918C18.3912 9.30765 18.2585 9.46031 18.0766 9.49108L17.4408 9.59861V18.0029L16.6429 18.2773C15.9764 18.5065 15.2343 18.2611 14.8527 17.6853L10.9545 11.803V17.4173L12.1544 17.647L12.1377 17.7583C12.0853 18.1069 11.7843 18.3705 11.4202 18.3867L8.43607 18.5195C8.39662 18.1447 8.67758 17.8093 9.06518 17.7686L9.45771 17.7273V10.2416L8.43607 10.1842Z" fill="black" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5062 2.22521L3.5426 3.04201C2.82599 3.09094 2.27051 3.66706 2.27051 4.36136V15.9975C2.27051 16.6499 2.49507 17.2837 2.90883 17.7992L5.48835 21.0126C5.90541 21.5322 6.56174 21.8183 7.24076 21.7765L20.519 20.9591C21.1995 20.9172 21.7293 20.3716 21.7293 19.7125V6.48332C21.7293 6.07557 21.5234 5.69348 21.1777 5.45975L16.9743 2.61784C16.546 2.32822 16.0277 2.1896 15.5062 2.22521ZM4.13585 4.54287C3.96946 4.41968 4.04865 4.16303 4.25768 4.14804L15.5866 3.33545C15.9476 3.30956 16.3063 3.40896 16.5982 3.61578L18.8713 5.22622C18.9576 5.28736 18.9171 5.41935 18.8102 5.42516L6.8129 6.07764C6.44983 6.09739 6.09144 5.99073 5.80276 5.77699L4.13585 4.54287ZM6.25018 8.12315C6.25018 7.7334 6.56506 7.41145 6.9677 7.38952L19.6523 6.69871C20.0447 6.67734 20.375 6.97912 20.375 7.35898V18.8141C20.375 19.2031 20.0613 19.5247 19.6594 19.5476L7.05516 20.2648C6.61845 20.2896 6.25018 19.954 6.25018 19.5312V8.12315Z" fill="black" />
   </g>
   <defs>
     <clipPath id="clip0_6294_13848">
-      <rect width="24" height="24" fill="white"/>
+      <rect width="24" height="24" fill="white" />
     </clipPath>
   </defs>
 </svg>
   notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
 }
 
-export default function AppBasic({ icon, icon_background, name, type, hoverTip, textStyle, iconType = 'app', isExtraInLine }: IAppBasicProps) {
+export default function AppBasic({ icon, icon_background, name, type, hoverTip, textStyle, mode = 'expand', iconType = 'app', isExtraInLine }: IAppBasicProps) {
   return (
     <div className="flex items-start">
       {icon && icon_background && iconType === 'app' && (
         </div>
 
       }
-      <div className="group">
+      {mode === 'expand' && <div className="group">
         <div className={`flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all ${textStyle?.main ?? ''}`}>
           {name}
           {hoverTip
             </Tooltip>}
         </div>
         <div className={`text-xs font-normal text-gray-500 group-hover:text-gray-700 break-all ${textStyle?.extra ?? ''}`}>{type}</div>
-      </div>
+      </div>}
     </div>
   )
 }

web/app/components/app-sidebar/index.tsx

 import React from 'react'
 import NavLink from './navLink'
-import AppBasic from './basic'
-
 import type { NavIcon } from './navLink'
+import AppBasic from './basic'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset' | 'notion'
 }
 
 const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const mode = isMobile ? 'collapse' : 'expand'
+
   return (
-    <div className="flex flex-col w-56 overflow-y-auto bg-white border-r border-gray-200 shrink-0">
+    <div className="flex flex-col sm:w-56 w-16 overflow-y-auto bg-white border-r border-gray-200 shrink-0 mobile:h-screen">
       <div className="flex flex-shrink-0 p-4">
-        <AppBasic iconType={iconType} icon={icon} icon_background={icon_background} name={title} type={desc} />
+        <AppBasic mode={mode} iconType={iconType} icon={icon} icon_background={icon_background} name={title} type={desc} />
       </div>
       <nav className="flex-1 p-4 space-y-1 bg-white">
         {navigation.map((item, index) => {
           return (
-            <NavLink key={index} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
+            <NavLink key={index} mode={mode} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
           )
         })}
         {extraInfo ?? null}

web/app/components/app-sidebar/navLink.tsx

     selected: NavIcon
     normal: NavIcon
   }
+  mode?: 'expand' | 'collapse'
 }
 
 export default function NavLink({
   name,
   href,
   iconMap,
+  mode = 'expand',
 }: NavLinkProps) {
   const segment = useSelectedLayoutSegment()
   const isActive = href.toLowerCase().split('/')?.pop() === segment?.toLowerCase()
         )}
         aria-hidden="true"
       />
-      {name}
+      {mode === 'expand' && name}
     </Link>
   )
 }

web/app/components/app/configuration/config-model/index.tsx

 import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
 import { ModelType, ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
 import { useProviderContext } from '@/context/provider-context'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { ModelModeType } from '@/types/app'
 export type IConfigModelProps = {
   isAdvancedMode: boolean
   const [maxTokenSettingTipVisible, setMaxTokenSettingTipVisible] = useState(false)
   const configContentRef = React.useRef(null)
   const currModel = textGenerationModelList.find(item => item.model_name === modelId)
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   // Cache loaded model param
   const [allParams, setAllParams, getAllParams] = useGetState<Record<string, Record<string, any>>>({})
   const currParams = allParams[provider]?.[modelId]
       </div>
       {isShowConfig && (
         <Panel
-          className='absolute z-20 top-8 right-0 !w-[496px] bg-white !overflow-visible shadow-md'
+          className='absolute z-20 top-8 left-0 sm:left-[unset] sm:right-0 !w-fit sm:!w-[496px] bg-white !overflow-visible shadow-md'
           keepUnFold
           headerIcon={
             <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                       <div className='grow flex items-center' key={tone.id}>
                         <Radio
                           value={tone.id}
-                          className={cn(tone.id === toneId && 'rounded-md border border-gray-200 shadow-md', '!mr-0 grow !px-2 !justify-center text-[13px] font-medium')}
+                          className={cn(tone.id === toneId && 'rounded-md border border-gray-200 shadow-md', '!mr-0 grow !px-1 sm:!px-2 !justify-center text-[13px] font-medium')}
                           labelClassName={cn(tone.id === toneId
                             ? ({
                               1: 'text-[#6938EF]',
                         >
                           <>
                             {getToneIcon(tone.id)}
-                            <div>{t(`common.model.tone.${tone.name}`) as string}</div>
+                            {!isMobile && <div>{t(`common.model.tone.${tone.name}`) as string}</div>}
                             <div className=""></div>
                           </>
                         </Radio>
                   </>
                   <Radio
                     value={TONE_LIST[3].id}
-                    className={cn(toneId === 4 && 'rounded-md border border-gray-200 shadow-md', '!mr-0 grow !px-2 !justify-center text-[13px] font-medium')}
+                    className={cn(toneId === 4 && 'rounded-md border border-gray-200 shadow-md', '!mr-0 grow !px-1 sm:!px-2 !justify-center text-[13px] font-medium')}
                     labelClassName={cn('flex items-center space-x-2 ', toneId === 4 ? 'text-[#155EEF]' : 'text-[#667085]')}
                   >
                     <>
                       {getToneIcon(TONE_LIST[3].id)}
-                      <div>{t(`common.model.tone.${TONE_LIST[3].name}`) as string}</div>
+                      {!isMobile && <div>{t(`common.model.tone.${TONE_LIST[3].name}`) as string}</div>}
                     </>
                   </Radio>
                 </Radio.Group>

web/app/components/app/configuration/config-model/model-mode-type-label.tsx

 
   return (
     <div
-      className={cn(className, isHighlight ? 'border-indigo-300 text-indigo-600' : 'border-gray-300 text-gray-500', 'flex items-center h-4 px-1 border  rounded text-xs font-semibold uppercase')}
+      className={cn(className, isHighlight ? 'border-indigo-300 text-indigo-600' : 'border-gray-300 text-gray-500', 'flex items-center h-4 px-1 border rounded text-xs font-semibold uppercase text-ellipsis overflow-hidden whitespace-nowrap')}
     >
       {t(`appDebug.modelConfig.modeType.${type}`)}
     </div>

web/app/components/app/configuration/config-model/model-name.tsx

   modelDisplayName,
 }) => {
   return (
-    <span title={modelDisplayName}>
+    <span className='text-ellipsis overflow-hidden whitespace-nowrap' title={modelDisplayName}>
       {modelDisplayName}
     </span>
   )

web/app/components/app/configuration/config-model/param-item.tsx

       onChange(id, getFitPrecisionValue(value, precision))
   }, [value, precision])
   return (
-    <div className="flex items-center justify-between">
+    <div className="flex items-center justify-between flex-wrap gap-y-2">
       <div className="flex flex-col flex-shrink-0">
         <div className="flex items-center">
           <span className="mr-[6px] text-gray-500 text-[13px] font-medium">{name}</span>

web/app/components/app/configuration/config-var/index.tsx

         <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.notSetVar')}</div>
       )}
       {hasVar && (
-        <div className='rounded-lg border border-gray-200 bg-white'>
-          <table className={`${s.table} w-full border-collapse border-0 rounded-lg text-sm`}>
+        <div className='rounded-lg border border-gray-200 bg-white overflow-x-auto'>
+          <table className={`${s.table} min-w-[440px] max-w-full border-collapse border-0 rounded-lg text-sm`}>
             <thead className="border-b  border-gray-200 text-gray-500 text-xs font-medium">
               <tr className='uppercase'>
                 <td>{t('appDebug.variableTable.key')}</td>

web/app/components/app/configuration/config-vision/param-config.tsx

         </div>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent style={{ zIndex: 50 }}>
-        <div className='w-[412px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
+        <div className='w-80 sm:w-[412px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
           <ParamConfigContent />
         </div>
       </PortalToFollowElemContent>

web/app/components/app/configuration/config/automatic/get-automatic-res.tsx

 import Confirm from '@/app/components/base/confirm'
 // type
 import type { AutomaticRes } from '@/service/debug'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 const noDataIcon = (
   <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
 }) => {
   const { t } = useTranslation()
 
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const [audiences, setAudiences] = React.useState<string>('')
   const [hopingToSolve, setHopingToSolve] = React.useState<string>('')
   const isValid = () => {
 
   const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)
 
+  const isShowAutoPromptInput = () => {
+    if (isMobile) {
+      // hide prompt panel on mobile if it is loading or has had result
+      if (isLoading || res)
+        return false
+      return true
+    }
+
+    // alway display prompt panel on desktop mode
+    return true
+  }
+
+  const isShowAutoPromptResPlaceholder = () => {
+    if (isMobile) {
+      // hide placeholder panel on mobile
+      return false
+    }
+
+    return !isLoading && !res
+  }
+
   return (
     <Modal
       isShow={isShow}
       onClose={onClose}
-      className='min-w-[1120px] !p-0'
+      className='!p-0 sm:min-w-[768px] xl:min-w-[1120px]'
       closable
     >
-      <div className='flex h-[680px]'>
-        <div className='w-[480px] shrink-0 px-8 py-6 h-full overflow-y-auto border-r border-gray-100'>
+      <div className='flex h-[680px] flex-wrap gap-y-4 overflow-y-auto'>
+        {isShowAutoPromptInput() && <div className='w-full sm:w-[360px] xl:w-[480px] shrink-0 px-8 py-6 h-full overflow-y-auto border-r border-gray-100'>
           <div>
             <div className='mb-1 text-xl font-semibold text-primary-600'>{t('appDebug.automatic.title')}</div>
             <div className='text-[13px] font-normal text-gray-500'>{t('appDebug.automatic.description')}</div>
               </Button>
             </div>
           </div>
-        </div>
+        </div>}
 
         {(!isLoading && res) && (
           <div className='grow px-8 pt-6 h-full overflow-y-auto'>
           </div>
         )}
         {isLoading && renderLoading}
-        {(!isLoading && !res) && renderNoData}
+        {isShowAutoPromptResPlaceholder() && renderNoData}
         {showConfirmOverwrite && (
           <Confirm
             title={t('appDebug.automatic.overwriteTitle')}

web/app/components/app/configuration/dataset-config/card-item/item.tsx

 import FileIcon from '@/app/components/base/file-icon'
 import { Settings01, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
+import Drawer from '@/app/components/base/drawer'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type ItemProps = {
   className?: string
   onRemove,
 }) => {
   const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const [showSettingsModal, setShowSettingsModal] = useState(false)
 
   const handleSave = (newDataset: DataSet) => {
           <Trash03 className='w-4 h-4 text-gray-500 group-hover/action:text-[#D92D20]' />
         </div>
       </div>
-      {
-        showSettingsModal && (
-          <SettingsModal
-            currentDataset={config}
-            onCancel={() => setShowSettingsModal(false)}
-            onSave={handleSave}
-          />
-        )
-      }
+      <Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
+        <SettingsModal
+          currentDataset={config}
+          onCancel={() => setShowSettingsModal(false)}
+          onSave={handleSave}
+        />
+      </Drawer>
     </div>
   )
 }

web/app/components/app/configuration/dataset-config/params-config/index.tsx

             onClose={() => {
               setOpen(false)
             }}
-            className='min-w-[528px]'
+            className='sm:min-w-[528px]'
             wrapperClassName='z-50'
             title={t('appDebug.datasetConfig.settingTitle')}
           >

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

 import type { FC } from 'react'
 import { useRef, useState } from 'react'
-import { useClickAway } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import { isEqual } from 'lodash-es'
 import cn from 'classnames'
 }
 
 const rowClass = `
-  flex justify-between py-4
+  flex justify-between py-4 flex-wrap gap-y-2
 `
 
 const labelClass = `
   const { t } = useTranslation()
   const { notify } = useToastContext()
   const ref = useRef(null)
-  useClickAway(() => {
-    if (ref)
-      onCancel()
-  }, ref)
 
   const { setShowAccountSettingModal } = useModalContext()
   const [loading, setLoading] = useState(false)
 
   return (
     <div
-      className='fixed top-16 right-2 flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
+      className='overflow-hidden w-full flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
       style={{
-        zIndex: 11,
-        width: 700,
         height: 'calc(100vh - 72px)',
       }}
       ref={ref}
           <div className={labelClass}>
             <div>{t('datasetSettings.form.permissions')}</div>
           </div>
-          <div className='w-[480px]'>
+          <div className='w-full sm:w-[480px]'>
             <PermissionsRadio
               disable={!localeCurrentDataset?.embedding_available}
               value={localeCurrentDataset.permission}
               onChange={v => handleValueChange('permission', v!)}
-              itemClassName='!w-[227px]'
+              itemClassName='sm:!w-[227px]'
             />
           </div>
         </div>
               disable={!localeCurrentDataset?.embedding_available}
               value={indexMethod}
               onChange={v => setIndexMethod(v!)}
-              itemClassName='!w-[227px]'
+              itemClassName='sm:!w-[227px]'
             />
           </div>
         </div>
       )}
 
       <div
-        className='absolute z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t bg-white '
+        className='sticky z-[5] bottom-0 w-full flex justify-end py-4 px-6 border-t bg-white '
         style={{
           borderColor: 'rgba(0, 0, 0, 0.05)',
         }}

web/app/components/app/configuration/index.tsx

 import { useBoolean, useGetState } from 'ahooks'
 import cn from 'classnames'
 import { clone, isEqual } from 'lodash-es'
+import { CodeBracketIcon } from '@heroicons/react/20/solid'
 import Button from '../../base/button'
 import Loading from '../../base/loading'
 import s from './style.module.css'
 import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
 import I18n from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import Drawer from '@/app/components/base/drawer'
 
 type PublichConfig = {
   modelConfig: ModelConfig
 
   const [conversationId, setConversationId] = useState<string | null>('')
 
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const [isShowDebugPanel, { setTrue: showDebugPanel, setFalse: hideDebugPanel }] = useBoolean(false)
+
   const [introduction, setIntroduction] = useState<string>('')
   const [controlClearChatMessage, setControlClearChatMessage] = useState(0)
   const [prevPromptConfig, setPrevPromptConfig] = useState<PromptConfig>({
     >
       <>
         <div className="flex flex-col h-full">
-          <div className='flex items-center justify-between px-6 shrink-0 h-14'>
+          <div className='flex items-center justify-between px-6 shrink-0 py-3 flex-wrap gap-y-2'>
             <div className='flex items-end'>
               <div className={s.promptTitle}></div>
               <div className='flex items-center h-[14px] space-x-1 text-xs'>
               </div>
             </div>
 
-            <div className='flex items-center'>
+            <div className='flex items-center flex-wrap gap-y-2 gap-x-2'>
               {/* Model and Parameters */}
               <ConfigModel
                 isAdvancedMode={isAdvancedMode}
                 }}
                 disabled={!hasSetAPIKEY}
               />
-              <div className='mx-3 w-[1px] h-[14px] bg-gray-200'></div>
+              <div className='w-[1px] h-[14px] bg-gray-200'></div>
               <Button onClick={() => setShowConfirm(true)} className='shrink-0 mr-2 w-[70px] !h-8 !text-[13px] font-medium'>{t('appDebug.operation.resetConfig')}</Button>
+              {isMobile && (
+                <Button className='!h-8 !text-[13px] font-medium' onClick={showDebugPanel}>
+                  <span className='mr-1'>{t('appDebug.operation.debugConfig')}</span>
+                  <CodeBracketIcon className="h-4 w-4 text-gray-500" />
+                </Button>
+              )}
               <Button type='primary' onClick={() => handlePublish(false)} className={cn(cannotPublish && '!bg-primary-200 !cursor-not-allowed', 'shrink-0 w-[70px] !h-8 !text-[13px] font-medium')}>{t('appDebug.operation.applyConfig')}</Button>
             </div>
           </div>
           <div className='flex grow h-[200px]'>
-            <div className="w-1/2 min-w-[560px] shrink-0">
+            <div className="w-full sm:w-1/2 shrink-0">
               <Config />
             </div>
-            <div className="relative w-1/2  grow h-full overflow-y-auto  py-4 px-6 bg-gray-50 flex flex-col rounded-tl-2xl border-t border-l" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+            {!isMobile && <div className="relative w-1/2 grow h-full overflow-y-auto py-4 px-6 bg-gray-50 flex flex-col rounded-tl-2xl border-t border-l" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
               <Debug
                 hasSetAPIKEY={hasSetAPIKEY}
                 onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
                 inputs={inputs}
               />
-            </div>
+            </div>}
           </div>
         </div>
         {showConfirm && (
             }}
           />
         )}
+        {isMobile && (
+          <Drawer showClose isOpen={isShowDebugPanel} onClose={hideDebugPanel} mask footer={null} panelClassname='!bg-gray-50'>
+            <Debug
+              hasSetAPIKEY={hasSetAPIKEY}
+              onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
+              inputs={inputs}
+            />
+          </Drawer>
+        )}
       </>
     </ConfigContext.Provider>
   )

web/app/components/app/log/filter.tsx

   if (!data)
     return null
   return (
-    <div className='flex flex-row items-center mb-4 text-gray-900 text-base'>
+    <div className='flex flex-row flex-wrap gap-y-2 gap-x-4 items-center mb-4 text-gray-900 text-base'>
       <SimpleSelect
         items={TIME_PERIOD_LIST.map(item => ({ value: item.value, name: t(`appLog.filter.period.${item.name}`) }))}
         className='mt-0 !w-40'
           setQueryParams({ ...queryParams, period: item.value })
         }}
         defaultValue={queryParams.period} />
-      <div className="relative ml-4 rounded-md mr-4">
+      <div className="relative rounded-md">
         <SimpleSelect
           defaultValue={'all'}
           className='!w-[300px]'

web/app/components/app/log/list.tsx

 import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
 import ModelName from '@/app/components/app/configuration/config-model/model-name'
 import ModelModeTypeLabel from '@/app/components/app/configuration/config-model/model-mode-type-label'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type IConversationList = {
   logs?: ChatConversationsResponse | CompletionConversationsResponse
         <div className='text-gray-500 text-[10px] leading-[14px]'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
         <div className='text-gray-700 text-[13px] leading-[18px]'>{isChatMode ? detail.id?.split('-').slice(-1)[0] : dayjs.unix(detail.created_at).format(t('appLog.dateTimeFormat') as string)}</div>
       </div>
-      <div className='flex items-center'>
+      <div className='flex items-center flex-wrap gap-y-1 justify-end'>
         <div
           className={cn('mr-2 flex items-center border h-8 px-2 space-x-2 rounded-lg bg-indigo-25 border-[#2A87F5]')}
         >
  */
 const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh }) => {
   const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const [showDrawer, setShowDrawer] = useState<boolean>(false) // Whether to display the chat details drawer
   const [currentConversation, setCurrentConversation] = useState<ChatConversationGeneralDetail | CompletionConversationGeneralDetail | undefined>() // Currently selected conversation
   const isChatMode = appDetail?.mode === 'chat' // Whether the app is a chat app
     return <Loading />
 
   return (
-    <>
-      <table className={`w-full border-collapse border-0 text-sm mt-3 ${s.logTable}`}>
-        <thead className="h-8 leading-8 border-b  border-gray-200 text-gray-500 font-bold">
+    <div className='overflow-x-auto'>
+      <table className={`w-full min-w-[440px] border-collapse border-0 text-sm mt-3 ${s.logTable}`}>
+        <thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-bold">
           <tr>
-            <td className='w-[1.375rem]'></td>
-            <td>{t('appLog.table.header.time')}</td>
-            <td>{t('appLog.table.header.endUser')}</td>
-            <td>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td>
-            <td>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td>
-            <td>{t('appLog.table.header.userRate')}</td>
-            <td>{t('appLog.table.header.adminRate')}</td>
+            <td className='w-[1.375rem] whitespace-nowrap'></td>
+            <td className='whitespace-nowrap'>{t('appLog.table.header.time')}</td>
+            <td className='whitespace-nowrap'>{t('appLog.table.header.endUser')}</td>
+            <td className='whitespace-nowrap'>{isChatMode ? t('appLog.table.header.summary') : t('appLog.table.header.input')}</td>
+            <td className='whitespace-nowrap'>{isChatMode ? t('appLog.table.header.messageCount') : t('appLog.table.header.output')}</td>
+            <td className='whitespace-nowrap'>{t('appLog.table.header.userRate')}</td>
+            <td className='whitespace-nowrap'>{t('appLog.table.header.adminRate')}</td>
           </tr>
         </thead>
         <tbody className="text-gray-500">
       <Drawer
         isOpen={showDrawer}
         onClose={onCloseDrawer}
-        mask={false}
+        mask={isMobile}
         footer={null}
-        panelClassname='mt-16 mr-2 mb-3 !p-0 !max-w-[640px] rounded-b-xl'
+        panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'
       >
         <DrawerContext.Provider value={{
           onClose: onCloseDrawer,
           }
         </DrawerContext.Provider>
       </Drawer>
-    </>
+    </div>
   )
 }
 

web/app/components/app/overview/appCard.tsx

 
   return (
     <div
-      className={`min-w-max shadow-xs border-[0.5px] rounded-lg border-gray-200 ${
+      className={`shadow-xs border-[0.5px] rounded-lg border-gray-200 ${
         className ?? ''
       }`}
     >
                 : t('appOverview.overview.apiInfo.accessibleAddress')}
             </div>
             <div className="w-full h-9 pl-2 pr-0.5 py-0.5 bg-black bg-opacity-[0.02] rounded-lg border border-black border-opacity-5 justify-start items-center inline-flex">
-              <div className="h-4 px-2 justify-start items-start gap-2 flex flex-1">
-                <div className="text-gray-700 text-xs font-medium">
+              <div className="h-4 px-2 justify-start items-start gap-2 flex flex-1 min-w-0">
+                <div className="text-gray-700 text-xs font-medium text-ellipsis overflow-hidden whitespace-nowrap">
                   {isApp ? appUrl : apiUrl}
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className={'pt-2 flex flex-row items-center'}>
+        <div className={'pt-2 flex flex-row items-center flex-wrap gap-y-2'}>
           {!isApp && <SecretKeyButton className='flex-shrink-0 !h-8 bg-white mr-2' textCls='!text-gray-700 font-medium' iconCls='stroke-[1.2px]' appId={appInfo.id} />}
           {OPERATIONS_MAP[cardType].map((op) => {
             const disabled

web/app/components/app/overview/customize/index.tsx

       </div>
       <div className='flex py-4'>
         <StepNum>3</StepNum>
-        <div className='flex flex-col w-full'>
+        <div className='flex flex-col w-full overflow-hidden'>
           <div className='text-gray-900'>{t(`${prefixCustomize}.way1.step3`)}</div>
           <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step3Tip`)}</div>
-          <pre className='box-border py-3 px-4 bg-gray-100 text-xs font-medium rounded-lg select-text'>
+          <pre className='overflow-x-scroll box-border py-3 px-4 bg-gray-100 text-xs font-medium rounded-lg select-text'>
             NEXT_PUBLIC_APP_ID={`'${appId}'`} <br />
             NEXT_PUBLIC_APP_KEY={'\'<Web API Key From Dify>\''} <br />
             NEXT_PUBLIC_API_URL={`'${api_base_url}'`}

web/app/components/app/overview/embedded/index.tsx

       <div className="mb-4 mt-8 text-gray-900 text-[14px] font-medium leading-tight">
         {t(`${prefixEmbedded}.explanation`)}
       </div>
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between flex-wrap gap-y-2">
         {Object.keys(OPTION_MAP).map((v, index) => {
           return (
             <div
             </Tooltip>
           </div>
         </div>
-        <div className="self-stretch p-3 justify-start items-start gap-2 inline-flex">
+        <div className="p-3 justify-start items-start gap-2 flex overflow-x-auto w-full">
           <div className="grow shrink basis-0 text-slate-700 text-[13px] leading-tight font-mono">
             <pre className='select-text'>{OPTION_MAP[option].getContent(appBaseUrl, accessToken, isTestEnv)}</pre>
           </div>

web/app/components/base/drawer/index.tsx

 'use client'
 import { Dialog } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
+import { XMarkIcon } from '@heroicons/react/24/outline'
 import Button from '../button'
 
-type DrawerProps = {
+export type IDrawerProps = {
   title?: string
   description?: string
   panelClassname?: string
   mask?: boolean
   isOpen: boolean
   // closable: boolean
+  showClose?: boolean
   onClose: () => void
   onCancel?: () => void
   onOk?: () => void
   children,
   footer,
   mask = true,
+  showClose = false,
   isOpen,
   onClose,
   onCancel,
   onOk,
-}: DrawerProps) {
+}: IDrawerProps) {
   const { t } = useTranslation()
   return (
     <Dialog
             >
               {title}
             </Dialog.Title>}
+            {showClose && <Dialog.Title className="flex items-center mb-4" as="div">
+              <XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
+            </Dialog.Title>}
             {description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'>{description}</Dialog.Description>}
             {children}
           </>

web/app/components/base/float-popover-container/index.tsx

+'use client'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type { PortalToFollowElemOptions } from '@/app/components/base/portal-to-follow-elem'
+
+type IFloatRightContainerProps = {
+  isMobile: boolean
+  open: boolean
+  toggle: () => void
+  triggerElement?: React.ReactNode
+  children?: React.ReactNode
+} & PortalToFollowElemOptions
+
+const FloatRightContainer = ({ open, toggle, triggerElement, isMobile, children, ...portalProps }: IFloatRightContainerProps) => {
+  return (
+    <>
+      {isMobile && (
+        <PortalToFollowElem open={open} {...portalProps}>
+          <PortalToFollowElemTrigger onClick={toggle}>
+            {triggerElement}
+          </PortalToFollowElemTrigger>
+          <PortalToFollowElemContent>
+            {children}
+          </PortalToFollowElemContent>
+        </PortalToFollowElem>
+      )}
+      {!isMobile && open && (
+        <>{children}</>
+      )}
+    </>
+  )
+}
+
+export default FloatRightContainer

web/app/components/base/float-right-container/index.tsx

+'use client'
+import Drawer from '@/app/components/base/drawer'
+import type { IDrawerProps } from '@/app/components/base/drawer'
+
+type IFloatRightContainerProps = {
+  isMobile: boolean
+  children?: React.ReactNode
+} & IDrawerProps
+
+const FloatRightContainer = ({ isMobile, children, isOpen, ...drawerProps }: IFloatRightContainerProps) => {
+  return (
+    <>
+      {isMobile && (
+        <Drawer isOpen={isOpen} {...drawerProps}>{children}</Drawer>
+      )}
+      {(!isMobile && isOpen) && (
+        <>{children}</>
+      )}
+    </>
+  )
+}
+
+export default FloatRightContainer

web/app/components/base/popover/style.module.css

     @apply absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl
 }
 .panelContainer {
-    @apply overflow-hidden bg-white w-full rounded-lg shadow-lg ring-1 ring-black ring-opacity-5
+    @apply overflow-hidden bg-white w-fit min-w-[130px] rounded-lg shadow-lg ring-1 ring-black ring-opacity-5
 }

web/app/components/base/portal-to-follow-elem/index.tsx

 
 import type { OffsetOptions, Placement } from '@floating-ui/react'
 
-type PortalToFollowElemOptions = {
+export type PortalToFollowElemOptions = {
   /*
   * top, bottom, left, right
   * start, end. Default is middle

web/app/components/base/select/index.tsx

 
 const SimpleSelect: FC<ISelectProps> = ({
   className,
-  wrapperClassName,
+  wrapperClassName = '',
   items = defaultItems,
   defaultValue = 1,
   disabled = false,

web/app/components/datasets/create/file-uploader/index.module.css

   color: #667085;
 }
 .uploader {
-  @apply relative box-border flex justify-center items-center mb-2;
+  @apply relative box-border flex justify-center items-center mb-2 p-3;
   flex-direction: column;
   max-width: 640px;
-  height: 80px;
+  min-height: 80px;
   background: #F9FAFB;
   border: 1px dashed #EAECF0;
   border-radius: 12px;

web/app/components/datasets/create/file-uploader/index.tsx

       />
       <div className={cn(s.title, titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
       <div ref={dropRef} className={cn(s.uploader, dragging && s.dragging)}>
-        <div className='flex justify-center items-center h-6 mb-2'>
+        <div className='flex justify-center items-center min-h-6 mb-2'>
           <span className={s.uploadIcon}/>
-          <span>{t('datasetCreation.stepOne.uploader.button')}</span>
-          <label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
+          <span>
+            {t('datasetCreation.stepOne.uploader.button')}
+            <label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
+          </span>
         </div>
         <div className={s.tip}>{t('datasetCreation.stepOne.uploader.tip', { size: fileUploadConfig.file_size_limit })}</div>
         {dragging && <div ref={dragRef} className={s.draggingCover}/>}

web/app/components/datasets/create/index.tsx

 
   return (
     <div className='flex' style={{ height: 'calc(100vh - 56px)' }}>
-      <div className="flex flex-col w-56 overflow-y-auto bg-white border-r border-gray-200 shrink-0">
+      <div className="flex flex-col w-11 sm:w-56 overflow-y-auto bg-white border-r border-gray-200 shrink-0">
         <StepsNavBar step={step} datasetId={datasetId} />
       </div>
       <div className="grow bg-white">

web/app/components/datasets/create/step-one/index.module.css

   background-color: #fff;
 }
 
-.dataSourceTypeList {
-  @apply flex items-center mb-8;
-}
 .dataSourceItem {
   @apply box-border relative shrink-0 flex items-center mr-3 p-3 h-14 bg-white rounded-xl cursor-pointer;
   border: 0.5px solid #EAECF0;

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

         <div className={s.form}>
           {
             shouldShowDataSourceTypeList && (
-              <div className={s.dataSourceTypeList}>
+              <div className='flex items-center mb-8 flex-wrap gap-y-4'>
                 <div
                   className={cn(
                     s.dataSourceItem,

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

 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 = {
 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 && (
             <>
           />
         </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>
   )
 }

web/app/components/datasets/create/step-two/index.module.css

 .pageHeader {
-  @apply px-16;
+  @apply px-16 flex justify-between items-center;
   position: sticky;
   top: 0;
   left: 0;
 }
 
 .ruleItem {
-  @apply flex items-center h-7;
+  @apply flex items-center;
 }
 
 .formFooter {
 
 .previewWrap {
   flex-shrink: 0;
-  width: 524px;
+  max-width: 524px;
 }
 
 .previewHeader {

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

 import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
 import { XMarkIcon } from '@heroicons/react/20/solid'
+import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import cn from 'classnames'
 import Link from 'next/link'
 import { groupBy } from 'lodash-es'
 } from '@/service/datasets'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
+import FloatRightContainer from '@/app/components/base/float-right-container'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import { type RetrievalConfig } from '@/types/app'
 import { IS_CE_EDITION } from '@/config'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { useProviderContext } from '@/context/provider-context'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import Tooltip from '@/app/components/base/tooltip'
 
 type ValueOf<T> = T[keyof T]
 type StepTwoProps = {
   const { t } = useTranslation()
   const { locale } = useContext(I18n)
 
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const { dataset: currentDataset, mutateDatasetRes } = useDatasetDetailContext()
   const scrollRef = useRef<HTMLDivElement>(null)
   const [scrolled, setScrolled] = useState(false)
   useEffect(() => {
     if (segmentationType === SegmentType.AUTO) {
       setAutomaticFileIndexingEstimate(null)
-      setShowPreview()
+      !isMobile && setShowPreview()
       fetchFileIndexingEstimate()
       setPreviewSwitched(false)
     }
   return (
     <div className='flex w-full h-full'>
       <div ref={scrollRef} className='relative h-full w-full overflow-y-scroll'>
-        <div className={cn(s.pageHeader, scrolled && s.fixed)}>{t('datasetCreation.steps.two')}</div>
-        <div className={cn(s.form)}>
+        <div className={cn(s.pageHeader, scrolled && s.fixed, isMobile && '!px-6')}>
+          <span>{t('datasetCreation.steps.two')}</span>
+          {isMobile && (
+            <Button
+              className='border-[0.5px] !h-8 hover:outline hover:outline-[0.5px] hover:outline-gray-300 text-gray-700 font-medium bg-white shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]'
+              onClick={setShowPreview}
+            >
+              <Tooltip selector='data-preview-toggle'>
+                <div className="flex flex-row items-center">
+                  <RocketLaunchIcon className="h-4 w-4 mr-1.5 stroke-[1.8px]" />
+                  <span className="text-[13px]">{t('datasetCreation.stepTwo.previewTitleButton')}</span>
+                </div>
+              </Tooltip>
+            </Button>
+          )}
+        </div>
+        <div className={cn(s.form, isMobile && '!px-4')}>
           <div className={s.label}>{t('datasetCreation.stepTwo.segmentation')}</div>
           <div className='max-w-[640px]'>
             <div
                     </div>
                   </div>
                   <div className={s.formRow}>
-                    <div className='w-full'>
+                    <div className='w-full flex flex-col gap-1'>
                       <div className={s.label}>{t('datasetCreation.stepTwo.rules')}</div>
                       {rules.map(rule => (
                         <div key={rule.id} className={s.ruleItem}>
           </div>
           <div className={s.label}>{t('datasetCreation.stepTwo.indexMode')}</div>
           <div className='max-w-[640px]'>
-            <div className='flex items-center gap-3'>
+            <div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'>
               {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
                 <div
                   className={cn(
           </div>
         </div>
       </div>
-      {(showPreview)
-        ? (
-          <div ref={previewScrollRef} className={cn(s.previewWrap, 'relativeh-full overflow-y-scroll border-l border-[#F2F4F7]')}>
-            <div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`)}>
-              <div className='flex items-center justify-between px-8'>
-                <div className='grow flex items-center'>
-                  <div>{t('datasetCreation.stepTwo.previewTitle')}</div>
-                  {docForm === DocForm.QA && !previewSwitched && (
-                    <Button className='ml-2 !h-[26px] !py-[3px] !px-2 !text-xs !font-medium !text-primary-600' onClick={previewSwitch}>{t('datasetCreation.stepTwo.previewButton')}</Button>
-                  )}
-                </div>
-                <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
-                  <XMarkIcon className='h-4 w-4'></XMarkIcon>
-                </div>
+      <FloatRightContainer isMobile={isMobile} isOpen={showPreview} onClose={hidePreview} footer={null}>
+        {showPreview && <div ref={previewScrollRef} className={cn(s.previewWrap, 'relative h-full overflow-y-scroll border-l border-[#F2F4F7]')}>
+          <div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`)}>
+            <div className='flex items-center justify-between px-8'>
+              <div className='grow flex items-center'>
+                <div>{t('datasetCreation.stepTwo.previewTitle')}</div>
+                {docForm === DocForm.QA && !previewSwitched && (
+                  <Button className='ml-2 !h-[26px] !py-[3px] !px-2 !text-xs !font-medium !text-primary-600' onClick={previewSwitch}>{t('datasetCreation.stepTwo.previewButton')}</Button>
+                )}
+              </div>
+              <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
+                <XMarkIcon className='h-4 w-4'></XMarkIcon>
               </div>
-              {docForm === DocForm.QA && !previewSwitched && (
-                <div className='px-8 pr-12 text-xs text-gray-500'>
-                  <span>{t('datasetCreation.stepTwo.previewSwitchTipStart')}</span>
-                  <span className='text-amber-600'>{t('datasetCreation.stepTwo.previewSwitchTipEnd')}</span>
-                </div>
-              )}
-            </div>
-            <div className='my-4 px-8 space-y-4'>
-              {previewSwitched && docForm === DocForm.QA && fileIndexingEstimate?.qa_preview && (
-                <>
-                  {fileIndexingEstimate?.qa_preview.map((item, index) => (
-                    <PreviewItem type={PreviewType.QA} key={item.question} qa={item} index={index + 1} />
-                  ))}
-                </>
-              )}
-              {(docForm === DocForm.TEXT || !previewSwitched) && fileIndexingEstimate?.preview && (
-                <>
-                  {fileIndexingEstimate?.preview.map((item, index) => (
-                    <PreviewItem type={PreviewType.TEXT} key={item} content={item} index={index + 1} />
-                  ))}
-                </>
-              )}
-              {previewSwitched && docForm === DocForm.QA && !fileIndexingEstimate?.qa_preview && (
-                <div className='flex items-center justify-center h-[200px]'>
-                  <Loading type='area' />
-                </div>
-              )}
-              {!previewSwitched && !fileIndexingEstimate?.preview && (
-                <div className='flex items-center justify-center h-[200px]'>
-                  <Loading type='area' />
-                </div>
-              )}
             </div>
+            {docForm === DocForm.QA && !previewSwitched && (
+              <div className='px-8 pr-12 text-xs text-gray-500'>
+                <span>{t('datasetCreation.stepTwo.previewSwitchTipStart')}</span>
+                <span className='text-amber-600'>{t('datasetCreation.stepTwo.previewSwitchTipEnd')}</span>
+              </div>
+            )}
+          </div>
+          <div className='my-4 px-8 space-y-4'>
+            {previewSwitched && docForm === DocForm.QA && fileIndexingEstimate?.qa_preview && (
+              <>
+                {fileIndexingEstimate?.qa_preview.map((item, index) => (
+                  <PreviewItem type={PreviewType.QA} key={item.question} qa={item} index={index + 1} />
+                ))}
+              </>
+            )}
+            {(docForm === DocForm.TEXT || !previewSwitched) && fileIndexingEstimate?.preview && (
+              <>
+                {fileIndexingEstimate?.preview.map((item, index) => (
+                  <PreviewItem type={PreviewType.TEXT} key={item} content={item} index={index + 1} />
+                ))}
+              </>
+            )}
+            {previewSwitched && docForm === DocForm.QA && !fileIndexingEstimate?.qa_preview && (
+              <div className='flex items-center justify-center h-[200px]'>
+                <Loading type='area' />
+              </div>
+            )}
+            {!previewSwitched && !fileIndexingEstimate?.preview && (
+              <div className='flex items-center justify-center h-[200px]'>
+                <Loading type='area' />
+              </div>
+            )}
           </div>
-        )
-        : (<div className={cn(s.sideTip)}>
-          <div className={s.tipCard}>
-            <span className={s.icon} />
-            <div className={s.title}>{t('datasetCreation.stepTwo.sideTipTitle')}</div>
-            <div className={s.content}>
-              <p className='mb-3'>{t('datasetCreation.stepTwo.sideTipP1')}</p>
-              <p className='mb-3'>{t('datasetCreation.stepTwo.sideTipP2')}</p>
-              <p className='mb-3'>{t('datasetCreation.stepTwo.sideTipP3')}</p>
-              <p>{t('datasetCreation.stepTwo.sideTipP4')}</p>
+        </div>}
+        {!showPreview && (
+          <div className={cn(s.sideTip)}>
+            <div className={s.tipCard}>
+              <span className={s.icon} />
+              <div className={s.title}>{t('datasetCreation.stepTwo.sideTipTitle')}</div>
+              <div className={s.content}>
+                <p className='mb-3'>{t('datasetCreation.stepTwo.sideTipP1')}</p>
+                <p className='mb-3'>{t('datasetCreation.stepTwo.sideTipP2')}</p>
+                <p className='mb-3'>{t('datasetCreation.stepTwo.sideTipP3')}</p>
+                <p>{t('datasetCreation.stepTwo.sideTipP4')}</p>
+              </div>
             </div>
           </div>
-        </div>)}
+        )}
+      </FloatRightContainer>
     </div>
   )
 }

web/app/components/datasets/create/steps-nav-bar/index.module.css

   background-size: 16px;
 }
 .stepList {
-  @apply p-4;
+  @apply p-4 relative;
   line-height: 18px;
 }
 
 .stepItem {
-  @apply relative flex justify-items-start pt-3 pr-0 pb-3;
+  @apply relative flex justify-items-start pt-3 pr-0 pb-3 box-content;
   padding-left: 52px;
   font-size: 13px;
+  height: 18px;
 }
 
 .stepItem.step1::before {

web/app/components/datasets/create/steps-nav-bar/index.tsx

 import { useRouter } from 'next/navigation'
 
 import cn from 'classnames'
+import { useCallback } from 'react'
 import s from './index.module.css'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type IStepsNavBarProps = {
-  step: number,
-  datasetId?: string,
+  step: number
+  datasetId?: string
 }
 
+const STEP_T_MAP: Record<number, string> = {
+  1: 'datasetCreation.steps.one',
+  2: 'datasetCreation.steps.two',
+  3: 'datasetCreation.steps.three',
+}
+
+const STEP_LIST = [1, 2, 3]
+
 const StepsNavBar = ({
   step,
   datasetId,
 }: IStepsNavBarProps) => {
   const { t } = useTranslation()
   const router = useRouter()
-  const navBackHandle = () => {
-    if (!datasetId) {
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
+  const navBackHandle = useCallback(() => {
+    if (!datasetId)
       router.replace('/datasets')
-    } else {
+    else
       router.replace(`/datasets/${datasetId}/documents`)
-    }
-  }
+  }, [router, datasetId])
 
   return (
     <div className='w-full pt-4'>
-      <div className={s.stepsHeader}>
-        <div onClick={navBackHandle} className={s.navBack} />
-        {!datasetId ? t('datasetCreation.steps.header.creation') : t('datasetCreation.steps.header.update')}
+      <div className={cn(s.stepsHeader, isMobile && '!px-0 justify-center')}>
+        <div onClick={navBackHandle} className={cn(s.navBack, isMobile && '!mr-0')} />
+        {!isMobile && (!datasetId ? t('datasetCreation.steps.header.creation') : t('datasetCreation.steps.header.update'))}
       </div>
-      <div className={cn(s.stepList)}>
-        <div className={cn(s.stepItem, s.step1, step === 1 && s.active, step !== 1 && s.done)}>
-          <div className={cn(s.stepNum)}>{step === 1 ? 1 : ''}</div>
-          <div className={cn(s.stepName)}>{t('datasetCreation.steps.one')}</div>
-        </div>
-        <div className={cn(s.stepItem, s.step2, step === 2 && s.active, step === 3 && s.done)}>
-          <div className={cn(s.stepNum)}>{step !== 3 ? 2 : ''}</div>
-          <div className={cn(s.stepName)}>{t('datasetCreation.steps.two')}</div>
-        </div>
-        <div className={cn(s.stepItem, s.step3, step === 3 && s.active)}>
-          <div className={cn(s.stepNum)}>3</div>
-          <div className={cn(s.stepName)}>{t('datasetCreation.steps.three')}</div>
-        </div>
+      <div className={cn(s.stepList, isMobile && '!p-0')}>
+        {STEP_LIST.map(item => (
+          <div
+            key={item}
+            className={cn(s.stepItem, s[`step${item}`], step === item && s.active, step > item && s.done, isMobile && 'px-0')}
+          >
+            <div className={cn(s.stepNum)}>{item}</div>
+            <div className={cn(s.stepName)}>{isMobile ? '' : t(STEP_T_MAP[item])}</div>
+          </div>
+        ))}
       </div>
     </div>
   )

web/app/components/datasets/documents/detail/completed/index.tsx

         }
       </div>
       <div className={cn(s.footer, s.numberInfo)}>
-        <div className='flex items-center'>
+        <div className='flex items-center flex-wrap gap-y-2'>
           <div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
           <div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as number)} {t('datasetDocuments.segment.hitCount')}</span>
           <div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span>

web/app/components/datasets/documents/detail/completed/style.module.css

   @apply text-gray-900 font-medium text-base flex-1;
 }
 .docSearchWrapper {
-  @apply sticky w-full h-10 -top-3 bg-white flex items-center mb-3 justify-between z-10;
+  @apply sticky w-full py-1 -top-3 bg-white flex items-center mb-3 justify-between z-10 flex-wrap gap-y-1;
 }
 .listContainer {
   height: calc(100% - 3.25rem);
   @apply grid gap-4 grid-cols-3 min-w-[902px] last:mb-[30px];
 }
 .segWrapper {
-  @apply box-border h-[180px] min-w-[290px] bg-gray-50 px-4 pt-4 flex flex-col text-opacity-50 rounded-xl border border-transparent hover:border-gray-200 hover:shadow-lg hover:cursor-pointer hover:bg-white;
+  @apply box-border h-[180px] w-full xl:min-w-[290px] bg-gray-50 px-4 pt-4 flex flex-col text-opacity-50 rounded-xl border border-transparent hover:border-gray-200 hover:shadow-lg hover:cursor-pointer hover:bg-white;
 }
 .segTitleWrapper {
   @apply flex items-center justify-between;
   white-space: pre-line;
 }
 .footer {
-  @apply flex items-center justify-between box-border border-t-gray-200 border-t-[0.5px] pt-3 mt-4;
+  @apply flex items-center justify-between box-border border-t-gray-200 border-t-[0.5px] pt-3 mt-4 flex-wrap gap-y-2;
 }
 .numberInfo {
   @apply text-gray-500 text-xs font-medium;

web/app/components/datasets/documents/detail/index.tsx

 import { ToastContext } from '@/app/components/base/toast'
 import type { DocForm } from '@/models/datasets'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
+import FloatRightContainer from '@/app/components/base/float-right-container'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 export const DocumentContext = createContext<{ datasetId?: string; documentId?: string; docForm: string }>({ docForm: '' })
 
 const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
   const router = useRouter()
   const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const { notify } = useContext(ToastContext)
   const { dataset } = useDatasetDetailContext()
   const embeddingAvailable = !!dataset?.embedding_available
-  const [showMetadata, setShowMetadata] = useState(true)
+  const [showMetadata, setShowMetadata] = useState(!isMobile)
   const [newSegmentModalVisible, setNewSegmentModalVisible] = useState(false)
   const [batchModalVisible, setBatchModalVisible] = useState(false)
   const [importStatus, setImportStatus] = useState<ProcessStatus | string>()
   return (
     <DocumentContext.Provider value={{ datasetId, documentId, docForm: documentDetail?.doc_form || '' }}>
       <div className='flex flex-col h-full'>
-        <div className='flex h-16 border-b-gray-100 border-b items-center p-4'>
-          <div onClick={backToPrev} className={'rounded-full w-8 h-8 flex justify-center items-center border-gray-100 cursor-pointer border hover:border-gray-300 shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08),0px_4px_6px_-2px_rgba(16,24,40,0.03)]'}>
+        <div className='flex min-h-16 border-b-gray-100 border-b items-center p-4 justify-between flex-wrap gap-y-2'>
+          <div onClick={backToPrev} className={'shrink-0 rounded-full w-8 h-8 flex justify-center items-center border-gray-100 cursor-pointer border hover:border-gray-300 shadow-[0px_12px_16px_-4px_rgba(16,24,40,0.08),0px_4px_6px_-2px_rgba(16,24,40,0.03)]'}>
             <ArrowLeftIcon className='text-primary-600 fill-current stroke-current h-4 w-4' />
           </div>
           <Divider className='!h-4' type='vertical' />
           <DocumentTitle extension={documentDetail?.data_source_info?.upload_file?.extension} name={documentDetail?.name} />
-          <StatusItem status={documentDetail?.display_status || 'available'} scene='detail' errorMessage={documentDetail?.error || ''} />
-          {embeddingAvailable && documentDetail && !documentDetail.archived && (
-            <SegmentAdd
-              importStatus={importStatus}
-              clearProcessStatus={resetProcessStatus}
-              showNewSegmentModal={showNewSegmentModal}
-              showBatchModal={showBatchModal}
+          <div className='flex items-center flex-wrap gap-y-2'>
+            <StatusItem status={documentDetail?.display_status || 'available'} scene='detail' errorMessage={documentDetail?.error || ''} />
+            {embeddingAvailable && documentDetail && !documentDetail.archived && (
+              <SegmentAdd
+                importStatus={importStatus}
+                clearProcessStatus={resetProcessStatus}
+                showNewSegmentModal={showNewSegmentModal}
+                showBatchModal={showBatchModal}
+              />
+            )}
+            <OperationAction
+              scene='detail'
+              embeddingAvailable={embeddingAvailable}
+              detail={{
+                enabled: documentDetail?.enabled || false,
+                archived: documentDetail?.archived || false,
+                id: documentId,
+                data_source_type: documentDetail?.data_source_type || '',
+                doc_form: documentDetail?.doc_form || '',
+              }}
+              datasetId={datasetId}
+              onUpdate={handleOperate}
+              className='!w-[216px]'
+            />
+            <button
+              className={cn(style.layoutRightIcon, showMetadata ? style.iconShow : style.iconClose)}
+              onClick={() => setShowMetadata(!showMetadata)}
             />
-          )}
-          <OperationAction
-            scene='detail'
-            embeddingAvailable={embeddingAvailable}
-            detail={{
-              enabled: documentDetail?.enabled || false,
-              archived: documentDetail?.archived || false,
-              id: documentId,
-              data_source_type: documentDetail?.data_source_type || '',
-              doc_form: documentDetail?.doc_form || '',
-            }}
-            datasetId={datasetId}
-            onUpdate={handleOperate}
-            className='!w-[216px]'
-          />
-          <button
-            className={cn(style.layoutRightIcon, showMetadata ? style.iconShow : style.iconClose)}
-            onClick={() => setShowMetadata(!showMetadata)}
-          />
+          </div>
         </div>
         <div className='flex flex-row flex-1' style={{ height: 'calc(100% - 4rem)' }}>
           {isDetailLoading
             ? <Loading type='app' />
-            : <div className={`box-border h-full w-full overflow-y-scroll ${embedding ? 'py-12 px-16' : 'pb-[30px] pt-3 px-6'}`}>
+            : <div className={`h-full w-full flex flex-col ${embedding ? 'px-6 py-3 sm:py-12 sm:px-16' : 'pb-[30px] pt-3 px-6'}`}>
               {embedding
                 ? <Embedding detail={documentDetail} detailUpdate={detailMutate} />
                 : <Completed
               }
             </div>
           }
-          {showMetadata && <Metadata
-            docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as any}
-            loading={isMetadataLoading}
-            onUpdate={metadataMutate}
-          />}
+          <FloatRightContainer showClose isOpen={showMetadata} onClose={() => setShowMetadata(false)} isMobile={isMobile} panelClassname='!justify-start' footer={null}>
+            <Metadata
+              docDetail={{ ...documentDetail, ...documentMetadata, doc_type: documentMetadata?.doc_type === 'others' ? '' : documentMetadata?.doc_type } as any}
+              loading={isMetadataLoading}
+              onUpdate={metadataMutate}
+            />
+          </FloatRightContainer>
         </div>
         <BatchModal
           isShow={batchModalVisible}

web/app/components/datasets/documents/detail/metadata/style.module.css

 .main {
-  @apply w-96 xl:w-[360px] flex-shrink-0 px-6 py-5 overflow-y-auto border-l-gray-100 border-l;
+  @apply w-full sm:w-96 xl:w-[360px] flex-shrink-0 p-0 sm:px-6 sm:py-5 overflow-y-auto border-none sm:border-l-gray-100 sm:border-l;
 }
 .operationWrapper {
   @apply flex flex-col items-center gap-4 mt-7 mb-8;

web/app/components/datasets/documents/index.tsx

         <p className={s.desc}>{t('datasetDocuments.list.desc')}</p>
       </div>
       <div className='flex flex-col px-6 py-4 flex-1'>
-        <div className='flex items-center justify-between'>
+        <div className='flex items-center justify-between flex-wrap gap-y-2 '>
           <Input
             showPrefix
             wrapperClassName='!w-[200px]'
             value={searchValue}
           />
           {embeddingAvailable && (
-            <Button type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px]'>
+            <Button type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px] !shrink-0'>
               <PlusIcon className='h-4 w-4 mr-2 stroke-current' />
               {isDataSourceNotion && t('datasetDocuments.list.addPages')}
               {!isDataSourceNotion && t('datasetDocuments.list.addFile')}

web/app/components/datasets/documents/list.tsx

   }
 
   return (
-    <>
-      <table className={`w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
+    <div className='w-full h-full overflow-x-auto'>
+      <table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
         <thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-medium text-xs uppercase">
           <tr>
             <td className='w-12'>#</td>
           })}
         </tbody>
       </table>
-    </>
+    </div>
   )
 }
 

web/app/components/datasets/hit-testing/hit-detail.tsx

   }
 
   return (
-    <div className={'flex flex-row'}>
-      <div className="flex-1 bg-gray-25 p-6">
+    <div className='flex flex-row overflow-x-auto'>
+      <div className="flex-1 bg-gray-25 p-6 min-w-[300px]">
         <div className="flex items-center">
           <SegmentIndexTag
             positionId={segInfo?.position || ''}

web/app/components/datasets/hit-testing/index.tsx

 'use client'
 import type { FC } from 'react'
-import React, { useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { omit } from 'lodash-es'
 import cn from 'classnames'
 import dayjs from 'dayjs'
+import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
 import SegmentCard from '../documents/detail/completed/SegmentCard'
 import docStyle from '../documents/detail/completed/style.module.css'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
 import Pagination from '@/app/components/base/pagination'
+import FloatRightContainer from '@/app/components/base/float-right-container'
 import { fetchTestingRecords } from '@/service/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
 import type { RetrievalConfig } from '@/types/app'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 const limit = 10
 
 
 const HitTesting: FC<Props> = ({ datasetId }: Props) => {
   const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>() // 初始化记录为空数组
   const [submitLoading, setSubmitLoading] = useState(false)
   const [currParagraph, setCurrParagraph] = useState<{ paraInfo?: HitTestingType; showModal: boolean }>({ showModal: false })
 
   const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
   const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
+  const [isShowRightPanel, { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel }] = useBoolean(!isMobile)
+
+  useEffect(() => {
+    setShowRightPanel(!isMobile)
+  }, [isMobile, setShowRightPanel])
 
   return (
     <div className={s.container}>
         <Textarea
           datasetId={datasetId}
           setHitResult={setHitResult}
+          onSubmit={showRightPanel}
           onUpdateList={recordsMutate}
           loading={submitLoading}
           setLoading={setSubmitLoading}
               <RecordsEmpty />
             )}
       </div>
-      <div className={s.rightDiv}>
-        {submitLoading
-          ? <div className={s.cardWrapper}>
-            <SegmentCard
-              loading={true}
-              scene='hitTesting'
-              className='h-[216px]'
-            />
-            <SegmentCard
-              loading={true}
-              scene='hitTesting'
-              className='h-[216px]'
-            />
-          </div>
-          : !hitResult?.records.length
-            ? (
-              <div className='h-full flex flex-col justify-center items-center'>
-                <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
-                <div className='text-gray-300 text-[13px] mt-3'>
-                  {t('datasetHitTesting.hit.emptyTip')}
-                </div>
-              </div>
-            )
-            : (
-              <>
-                <div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
-                <div className='overflow-auto flex-1'>
-                  <div className={s.cardWrapper}>
-                    {hitResult?.records.map((record, idx) => {
-                      return <SegmentCard
-                        key={idx}
-                        loading={false}
-                        detail={record.segment as any}
-                        score={record.score}
-                        scene='hitTesting'
-                        className='h-[216px] mb-4'
-                        onClick={() => onClickCard(record as any)}
-                      />
-                    })}
+      <FloatRightContainer panelClassname='!justify-start !overflow-y-auto' showClose isMobile={isMobile} isOpen={isShowRightPanel} onClose={hideRightPanel} footer={null}>
+        <div className={cn(s.rightDiv, 'p-0 sm:px-8 sm:pt-[42px] sm:pb-[26px]')}>
+          {submitLoading
+            ? <div className={s.cardWrapper}>
+              <SegmentCard
+                loading={true}
+                scene='hitTesting'
+                className='h-[216px]'
+              />
+              <SegmentCard
+                loading={true}
+                scene='hitTesting'
+                className='h-[216px]'
+              />
+            </div>
+            : !hitResult?.records.length
+              ? (
+                <div className='h-full flex flex-col justify-center items-center'>
+                  <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
+                  <div className='text-gray-300 text-[13px] mt-3'>
+                    {t('datasetHitTesting.hit.emptyTip')}
                   </div>
                 </div>
-              </>
-            )
-        }
-      </div>
+              )
+              : (
+                <>
+                  <div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
+                  <div className='overflow-auto flex-1'>
+                    <div className={s.cardWrapper}>
+                      {hitResult?.records.map((record, idx) => {
+                        return <SegmentCard
+                          key={idx}
+                          loading={false}
+                          detail={record.segment as any}
+                          score={record.score}
+                          scene='hitTesting'
+                          className='h-[216px] mb-4'
+                          onClick={() => onClickCard(record as any)}
+                        />
+                      })}
+                    </div>
+                  </div>
+                </>
+              )
+          }
+        </div>
+      </FloatRightContainer>
       <Modal
         className='!max-w-[960px] !p-0'
+        wrapperClassName='!z-40'
         closable
         onClose={() => setCurrParagraph({ showModal: false })}
         isShow={currParagraph.showModal}

web/app/components/datasets/hit-testing/style.module.css

 .container {
-  @apply flex h-full w-full relative;
+  @apply flex h-full w-full relative overflow-y-auto;
 }
 .container > div {
   @apply flex-1 h-full;
   @apply border-r border-gray-100 px-6 py-3 flex flex-col;
 }
 .rightDiv {
-  @apply px-8 pt-[42px] pb-[26px] flex flex-col;
+  @apply flex flex-col;
 }
 .titleWrapper {
   @apply flex flex-col justify-center gap-1 mb-5;

web/app/components/datasets/hit-testing/textarea.tsx

-import type { FC } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import { asyncRunSafe } from '@/utils'
 import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
 
-type Props = {
+type TextAreaWithButtonIProps = {
   datasetId: string
   onUpdateList: () => void
   setHitResult: (res: HitTestingResponse) => void
   onClickRetrievalMethod: () => void
   retrievalConfig: RetrievalConfig
   isEconomy: boolean
+  onSubmit?: () => void
 }
 
-const TextAreaWithButton: FC<Props> = ({
+const TextAreaWithButton = ({
   datasetId,
   onUpdateList,
   setHitResult,
   onClickRetrievalMethod,
   retrievalConfig,
   isEconomy,
-}) => {
+  onSubmit: _onSubmit,
+}: TextAreaWithButtonIProps) => {
   const { t } = useTranslation()
   const { indexingTechnique } = useContext(DatasetDetailContext)
 
       onUpdateList?.()
     }
     setLoading(false)
+    _onSubmit && _onSubmit()
   }
 
   const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method

web/app/components/datasets/settings/form/index.tsx

 import { useProviderContext } from '@/context/provider-context'
 import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 const rowClass = `
-  flex justify-between py-4
+  flex justify-between py-4 flex-wrap gap-y-2
 `
 const labelClass = `
   flex items-center w-[168px] h-9
 `
 const inputClass = `
-  w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
+  w-full max-w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
 `
 const useInitialValue: <T>(depend: T, dispatch: Dispatch<T>) => void = (depend, dispatch) => {
   useEffect(() => {
   useInitialValue<DataSet['indexing_technique'] | undefined>(currentDataset?.indexing_technique, setIndexMethod)
 
   return (
-    <div className='w-[800px] px-16 py-6'>
+    <div className='w-full sm:w-[800px] p-4 sm:px-16 sm:py-6'>
       <div className={rowClass}>
         <div className={labelClass}>
           <div>{t('datasetSettings.form.name')}</div>
         </div>
         <input
           disabled={!currentDataset?.embedding_available}
-          className={cn(inputClass, !currentDataset?.embedding_available && 'opacity-60')}
+          className={cn(inputClass, !currentDataset?.embedding_available && 'opacity-60', 'h-9')}
           value={name}
           onChange={e => setName(e.target.value)}
         />
         <div className={labelClass}>
           <div>{t('datasetSettings.form.desc')}</div>
         </div>
-        <div>
+        <div className='w-full max-w-[480px]'>
           <textarea
             disabled={!currentDataset?.embedding_available}
             className={cn(`${inputClass} block mb-2 h-[120px] py-2 resize-none`, !currentDataset?.embedding_available && 'opacity-60')}
         <div className={labelClass}>
           <div>{t('datasetSettings.form.permissions')}</div>
         </div>
-        <div className='w-[480px]'>
+        <div className='w-full sm:w-[480px]'>
           <PermissionsRadio
             disable={!currentDataset?.embedding_available}
             value={permission}
             <div className={labelClass}>
               <div>{t('datasetSettings.form.indexMethod')}</div>
             </div>
-            <div className='w-[480px]'>
+            <div className='w-full sm:w-[480px]'>
               <IndexMethodRadio
                 disable={!currentDataset?.embedding_available}
                 value={indexMethod}

web/app/components/datasets/settings/index-method-radio/index.tsx

 import type { DataSet } from '@/models/datasets'
 
 const itemClass = `
-  w-[234px] p-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
+  w-full sm:w-[234px] p-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
 `
 const radioClass = `
   w-4 h-4 border-[2px] border-gray-200 rounded-full
   ]
 
   return (
-    <div className={classNames(s.wrapper, 'flex justify-between w-full')}>
+    <div className={classNames(s.wrapper, 'flex justify-between w-full flex-wrap gap-y-2')}>
       {
         options.map(option => (
           <div

web/app/components/datasets/settings/permissions-radio/index.tsx

 import type { DataSet } from '@/models/datasets'
 
 const itemClass = `
-  flex items-center w-[234px] h-12 px-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
+  flex items-center w-full sm:w-[234px] h-12 px-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
 `
 const radioClass = `
   w-4 h-4 border-[2px] border-gray-200 rounded-full
   ]
 
   return (
-    <div className={classNames(s.wrapper, 'flex justify-between w-full')}>
+    <div className={classNames(s.wrapper, 'flex justify-between w-full flex-wrap gap-y-2')}>
       {
         options.map(option => (
           <div

web/app/components/develop/index.tsx

 'use client'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
+import s from './secret-key/style.module.css'
 import Doc from '@/app/components/develop/doc'
 import InputCopy from '@/app/components/develop/secret-key/input-copy'
 import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
 import { fetchAppDetail } from '@/service/apps'
-import s from './secret-key/style.module.css'
 
 type IDevelopMainProps = {
   appId: string
 
   return (
     <div className='relative flex flex-col h-full overflow-hidden'>
-      <div className='flex items-center justify-between flex-shrink-0 px-6 border-b border-solid h-14 border-b-gray-100'>
+      <div className='flex items-center justify-between flex-shrink-0 px-6 border-b border-solid py-2 border-b-gray-100'>
         <div className='text-lg font-medium text-gray-900'>{dictionary.app?.develop?.title}</div>
-        <div className='flex items-center'>
-          <InputCopy className={`flex-shrink-0 mr-1 w-60 ${s.w320}`} value={appDetail?.api_base_url}>
+        <div className='flex items-center flex-wrap gap-y-1'>
+          <InputCopy className='flex-shrink-0 mr-1 w-52 sm:w-80' value={appDetail?.api_base_url}>
             <div className={`ml-2 border border-gray-200 border-solid flex-shrink-0 px-2 py-0.5 rounded-[6px] text-gray-500 text-[0.625rem] ${s.customApi}`}>
               {t('appApi.apiServer')}
             </div>
           <SecretKeyButton className='flex-shrink-0' appId={appId} />
         </div>
       </div>
-      <div className='px-10 py-4 overflow-auto grow'>
+      <div className='px-4 sm:px-10 py-4 overflow-auto grow'>
         <Doc appDetail={appDetail} />
       </div>
     </div>

web/app/components/develop/secret-key/style.module.css

     width: 4rem;
 }
 
-.w320 {
-    width: 20rem;
-}
-
 .customApi {
     font-size: 11px;
 }

web/app/components/explore/installed-app/index.tsx

   }
 
   return (
-    <div className='h-full p-2'>
+    <div className='h-full py-2 pl-0 pr-2 sm:p-2'>
       {installedApp?.app.mode === 'chat'
         ? (
           <ChatApp isInstalledApp installedAppInfo={installedApp} />

web/app/components/explore/sidebar/app-nav-item/index.tsx

 import AppIcon from '@/app/components/base/app-icon'
 
 export type IAppNavItemProps = {
+  isMobile: boolean
   name: string
   id: string
   icon: string
 }
 
 export default function AppNavItem({
+  isMobile,
   name,
   id,
   icon,
       className={cn(
         s.item,
         isSelected ? s.active : 'hover:bg-gray-200',
-        'flex h-8 items-center justify-between px-2 rounded-lg text-sm font-normal ',
+        'flex h-8 items-center justify-between mobile:justify-center px-2 mobile:px-1 rounded-lg text-sm font-normal',
       )}
       onClick={() => {
         router.push(url) // use Link causes popup item always trigger jump. Can not be solved by e.stopPropagation().
       }}
     >
-      <div className='flex items-center space-x-2 w-0 grow'>
-        <AppIcon size='tiny' icon={icon} background={icon_background} />
-        <div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
-      </div>
-      {
-        <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
-          <ItemOperation
-            isPinned={isPinned}
-            isItemHovering={isHovering}
-            togglePin={togglePin}
-            isShowDelete={!uninstallable && !isSelected}
-            onDelete={() => onDelete(id)}
-          />
-        </div>
-      }
+      {isMobile && <AppIcon size='tiny' icon={icon} background={icon_background} />}
+      {!isMobile && (
+        <>
+          <div className='flex items-center space-x-2 w-0 grow'>
+            <AppIcon size='tiny' icon={icon} background={icon_background} />
+            <div className='overflow-hidden text-ellipsis whitespace-nowrap'>{name}</div>
+          </div>
+          <div className='shrink-0 h-6' onClick={e => e.stopPropagation()}>
+            <ItemOperation
+              isPinned={isPinned}
+              isItemHovering={isHovering}
+              togglePin={togglePin}
+              isShowDelete={!uninstallable && !isSelected}
+              onDelete={() => onDelete(id)}
+            />
+          </div>
+        </>
+      )}
     </div>
   )
 }

web/app/components/explore/sidebar/index.tsx

 import { fetchInstalledAppList as doFetchInstalledAppList, uninstallApp, updatePinStatus } from '@/service/explore'
 import ExploreContext from '@/context/explore-context'
 import Confirm from '@/app/components/base/confirm'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 const SelectedDiscoveryIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   </svg>
 )
 
-const SideBar: FC<{
+export type IExploreSideBarProps = {
   controlUpdateInstalledApps: number
-}> = ({
+}
+
+const SideBar: FC<IExploreSideBarProps> = ({
   controlUpdateInstalledApps,
 }) => {
   const { t } = useTranslation()
   const isChatSelected = lastSegment === 'chat'
   const { installedApps, setInstalledApps } = useContext(ExploreContext)
 
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const fetchInstalledAppList = async () => {
     const { installed_apps }: any = await doFetchInstalledAppList()
     setInstalledApps(installed_apps)
   }, [controlUpdateInstalledApps])
 
   return (
-    <div className='w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
+    <div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
       <div>
         <Link
           href='/explore/apps'
-          className={cn(isDiscoverySelected ? 'text-primary-600  bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center h-9 pl-3 space-x-2 rounded-lg')}
+          className={cn(isDiscoverySelected ? 'text-primary-600  bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
           style={isDiscoverySelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
         >
           {isDiscoverySelected ? <SelectedDiscoveryIcon /> : <DiscoveryIcon />}
-          <div className='text-sm'>{t('explore.sidebar.discovery')}</div>
+          {!isMobile && <div className='text-sm'>{t('explore.sidebar.discovery')}</div>}
         </Link>
         <Link
           href='/explore/chat'
-          className={cn(isChatSelected ? 'text-primary-600  bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center h-9 pl-3 space-x-2 rounded-lg')}
+          className={cn(isChatSelected ? 'text-primary-600  bg-white font-semibold' : 'text-gray-700 font-medium', 'flex items-center mobile:justify-center mobile:w-fit h-9 px-3 mobile:px-2 gap-2 rounded-lg')}
           style={isChatSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}}
         >
           {isChatSelected ? <SelectedChatIcon /> : <ChatIcon />}
-          <div className='text-sm'>{t('explore.sidebar.chat')}</div>
+          {!isMobile && <div className='text-sm'>{t('explore.sidebar.chat')}</div>}
         </Link>
       </div>
       {installedApps.length > 0 && (
         <div className='mt-10'>
-          <div className='pl-2 text-xs text-gray-500 font-medium uppercase'>{t('explore.sidebar.workspace')}</div>
+          <p className='pl-2 mobile:px-0 text-xs text-gray-500 break-all font-medium uppercase'>{t('explore.sidebar.workspace')}</p>
           <div className='mt-3 space-y-1 overflow-y-auto overflow-x-hidden'
             style={{
               height: 'calc(100vh - 250px)',
               return (
                 <Item
                   key={id}
+                  isMobile={isMobile}
                   name={name}
                   icon={icon}
                   icon_background={icon_background}

web/app/components/explore/universal-chat/index.tsx

 import { useBoolean, useGetState } from 'ahooks'
 import AppUnavailable from '../../base/app-unavailable'
 import useConversation from './hooks/use-conversation'
-import s from './style.module.css'
 import Init from './init'
 import { ToastContext } from '@/app/components/base/toast'
 import Sidebar from '@/app/components/share/chat/sidebar'
     return <Loading type='app' />
 
   return (
-    <div className='bg-gray-100'>
+    <div className='bg-gray-100 h-full'>
       <div
         className={cn(
-          'flex rounded-t-2xl bg-white overflow-hidden rounded-b-2xl',
+          'flex rounded-t-2xl bg-white overflow-hidden rounded-b-2xl h-full',
         )}
         style={{
           boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
         )}
         {/* main */}
         <div className={cn(
-          s.installedApp,
-          'flex-grow flex flex-col overflow-y-auto',
+          'h-full flex-grow flex flex-col overflow-y-auto',
         )
         }>
           {(!isNewConversation || isResponsing || errorHappened) && (

web/app/components/explore/universal-chat/init/index.tsx

 import s from './style.module.css'
 
 const Line = (
-  <svg width="720" height="1" viewBox="0 0 720 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg width="100%" height="1" viewBox="0 0 720 1" fill="none" xmlns="http://www.w3.org/2000/svg">
     <line y1="0.5" x2="720" y2="0.5" stroke="url(#paint0_linear_6845_53470)"/>
     <defs>
       <linearGradient id="paint0_linear_6845_53470" x1="0" y1="1" x2="720" y2="1" gradientUnits="userSpaceOnUse">
   const { t } = useTranslation()
 
   return (
-    <div className='h-full flex items-center'>
+    <div className='h-full flex items-center justify-center'>
       <div>
-        <div className='w-[480px] mx-auto text-center'>
+        <div className='text-center'>
           <div className={cn(s.textGradient, 'mb-2 leading-[32px] font-semibold text-[24px]')}>{t('explore.universalChat.welcome')}</div>
           <div className='mb-2 font-normal text-sm text-gray-500'>{t('explore.universalChat.welcomeDescribe')}</div>
         </div>
-        <div className='flex mb-2 mx-auto h-8 items-center'>
+        <div className='flex mb-2 h-8 items-center'>
           {Line}
         </div>
-        <Config className='w-[480px] mx-auto' {...configProps} />
+        <Config {...configProps} />
       </div>
     </div>
   )

web/app/components/explore/universal-chat/style.module.css

-.installedApp {
-  height: calc(100vh - 74px);
-}

web/app/components/header/HeaderWrapper.tsx

 import classNames from 'classnames'
 import { usePathname } from 'next/navigation'
 import s from './index.module.css'
-import { useAppContext } from '@/context/app-context'
 
 type HeaderWrapperProps = {
   children: React.ReactNode
   children,
 }: HeaderWrapperProps) => {
   const pathname = usePathname()
-  const { langeniusVersionInfo } = useAppContext()
   const isBordered = ['/apps', '/datasets'].includes(pathname)
 
   return (
     <div className={classNames(
-      'sticky top-0 left-0 right-0 z-20 flex bg-gray-100 grow-0 shrink-0 basis-auto h-14',
+      'sticky top-0 left-0 right-0 z-20 flex flex-col bg-gray-100 grow-0 shrink-0 basis-auto min-h-[56px]',
       s.header,
       isBordered ? 'border-b border-gray-200' : '',
     )}
     >
-      <div className={classNames(
-        s[`header-${langeniusVersionInfo.current_env}`],
-        'flex flex-1 items-center justify-between px-4',
-      )}>
-        {children}
-      </div>
+      {children}
     </div>
   )
 }

web/app/components/header/account-dropdown/index.tsx

 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 
-export default function AppSelector() {
+export type IAppSelecotr = {
+  isMobile: boolean
+}
+
+export default function AppSelector({ isMobile }: IAppSelecotr) {
   const itemClassName = `
     flex items-center w-full h-9 px-3 text-gray-700 text-[14px]
     rounded-lg font-normal hover:bg-gray-50 cursor-pointer
                     inline-flex items-center
                     rounded-[20px] py-1 pr-2.5 pl-1 text-sm
                   text-gray-700 hover:bg-gray-200
+                    mobile:px-1
                     ${open && 'bg-gray-200'}
                   `}
                 >
-                  <Avatar name={userProfile.name} className='mr-2' size={32} />
-                  {userProfile.name}
-                  <ChevronDown className="w-3 h-3 ml-1 text-gray-700"/>
+                  <Avatar name={userProfile.name} className='sm:mr-2 mr-0' size={32} />
+                  {!isMobile && <>
+                    {userProfile.name}
+                    <ChevronDown className="w-3 h-3 ml-1 text-gray-700"/>
+                  </>}
                 </Menu.Button>
               </div>
               <Transition

web/app/components/header/account-setting/api-based-extension-page/selector.tsx

             )
         }
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='w-[576px] z-[11]'>
+      <PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[11]'>
         <div className='w-full rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg z-10'>
           <div className='p-1'>
             <div className='flex items-center justify-between px-3 pt-2 pb-1'>

web/app/components/header/account-setting/data-source-page/data-source-notion/index.tsx

             : (
               <div
                 className={
-                  `flex items-center px-3 h-7 bg-white border-[0.5px] border-gray-200 text-xs font-medium text-primary-600 rounded-md
+                  `flex items-center px-3 py-1 min-h-7 bg-white border-[0.5px] border-gray-200 text-xs font-medium text-primary-600 rounded-md
                   ${isCurrentWorkspaceManager ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
                 }
                 onClick={handleConnectNotion}

web/app/components/header/account-setting/index.tsx

 import { Globe01 } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
 import { AtSign, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 const iconClassName = `
   w-4 h-4 ml-3 mr-2
 }: IAccountSettingProps) {
   const [activeMenu, setActiveMenu] = useState(activeTab)
   const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const menuItems = [
     {
       key: 'workspace-group',
       wrapperClassName='!z-20 pt-[60px]'
     >
       <div className='flex'>
-        <div className='w-[200px] p-4 border border-gray-100'>
-          <div className='mb-8 ml-2 text-base font-medium leading-6 text-gray-900'>{t('common.userProfile.settings')}</div>
-          <div>
+        <div className='w-[44px] sm:w-[200px] px-[1px] py-4 sm:p-4 border border-gray-100 shrink-0 sm:shrink-1 flex flex-col items-center sm:items-start'>
+          <div className='mb-8 ml-0 sm:ml-2 text-sm sm:text-base font-medium leading-6 text-gray-900'>{t('common.userProfile.settings')}</div>
+          <div className='w-full'>
             {
               menuItems.map(menuItem => (
                 <div key={menuItem.key} className='mb-4'>
                           onClick={() => setActiveMenu(item.key)}
                         >
                           {activeMenu === item.key ? item.activeIcon : item.icon}
-                          <div className='truncate'>{item.name}</div>
+                          {!isMobile && <div className='truncate'>{item.name}</div>}
                         </div>
                       ))
                     }
               <XClose className='w-4 h-4 text-gray-500' />
             </div>
           </div>
-          <div className='px-8 pt-2'>
+          <div className='px-4 sm:px-8 pt-2'>
             {activeMenu === 'account' && <AccountPage />}
             {activeMenu === 'members' && <MembersPage />}
             {activeMenu === 'integrations' && <IntegrationsPage />}

web/app/components/header/account-setting/members-page/index.tsx

             {t('common.members.invite')}
           </div>
         </div>
-        <div>
-          <div className='flex items-center py-[7px] border-b border-gray-200'>
+        <div className='overflow-x-auto'>
+          <div className='flex items-center py-[7px] border-b border-gray-200 min-w-[480px]'>
             <div className='grow px-3 text-xs font-medium text-gray-500'>{t('common.members.name')}</div>
             <div className='shrink-0 w-[104px] text-xs font-medium text-gray-500'>{t('common.members.lastActive')}</div>
             <div className='shrink-0 w-[96px] px-3 text-xs font-medium text-gray-500'>{t('common.members.role')}</div>
           </div>
-          <div>
+          <div className='min-w-[480px]'>
             {
               accounts.map(account => (
                 <div key={account.id} className='flex border-b border-gray-100'>

web/app/components/header/account-setting/model-page/index.tsx

         }
         <SystemModel onUpdate={() => mutateProviders()} />
       </div>
-      <div className='grid grid-cols-2 gap-4 mb-6'>
+      <div className='grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6'>
         {
           MODEL_CARD_LIST.map((model, index) => (
             <ModelCard

web/app/components/header/account-setting/model-page/model-item/index.tsx

 
   return (
     <div className='mb-2 bg-gray-50 rounded-xl'>
-      <div className='flex justify-between items-center px-4 h-14'>
+      <div className='flex justify-between items-center p-4 min-h-[56px] flex-wrap gap-y-1'>
         <div className='flex items-center'>
           {modelItem.titleIcon[locale]}
           {

web/app/components/header/account-setting/model-page/model-modal/Form.tsx

               options?.map(option => (
                 <div
                   className={`
-                    flex items-center px-3 h-9 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
+                    flex items-center px-3 py-2 rounded-lg border border-gray-100 bg-gray-25 cursor-pointer
                     ${value?.[field.key] === option.key && 'bg-white border-[1.5px] border-primary-400 shadow-sm'}
                   `}
                   onClick={() => handleFormChange(field.key, option.key)}

web/app/components/header/account-setting/model-page/model-modal/index.tsx

     <PortalToFollowElem open>
       <PortalToFollowElemContent className='w-full h-full z-[60]'>
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
-          <div className='w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
+          <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
             <div className='px-8 pt-8'>
               <div className='flex justify-between items-center mb-2'>
                 <div className='text-xl font-semibold text-gray-900'>{renderTitlePrefix()}</div>
                 onClearedChange={setCleared}
                 onValidating={handleValidating}
               />
-              <div className='flex justify-between items-center py-6'>
+              <div className='flex justify-between items-center py-6 flex-wrap gap-y-2'>
                 <a
                   href={modelModal?.link.href}
                   target='_blank'

web/app/components/header/index.tsx

 'use client'
 
 import Link from 'next/link'
+import { useSelectedLayoutSegment } from 'next/navigation'
+import classNames from 'classnames'
+import { useEffect } from 'react'
+import { Bars3Icon } from '@heroicons/react/20/solid'
+import { useBoolean } from 'ahooks'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
 import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
 import GithubStar from './github-star'
+import s from './index.module.css'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 const navClassName = `
-  flex items-center relative mr-3 px-3 h-8 rounded-xl
+  flex items-center relative mr-3 px-3 h-9 rounded-xl
   font-medium text-sm
   cursor-pointer
 `
 
 const Header = () => {
-  const { isCurrentWorkspaceManager } = useAppContext()
+  const selectedSegment = useSelectedLayoutSegment()
+  const { isCurrentWorkspaceManager, langeniusVersionInfo } = useAppContext()
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+  const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
+
+  useEffect(() => {
+    hideNavMenu()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSegment])
+
   return (
     <>
-      <div className='flex items-center'>
-        <Link href="/apps" className='flex items-center mr-4'>
-          <LogoSite />
-        </Link>
-        <GithubStar />
-      </div>
-      <div className='flex items-center'>
-        <ExploreNav className={navClassName} />
-        <AppNav />
-        {isCurrentWorkspaceManager && <DatasetNav />}
-      </div>
-      <div className='flex items-center flex-shrink-0'>
-        <EnvNav />
-        <WorkspaceProvider>
-          <AccountDropdown />
-        </WorkspaceProvider>
+      <div className={classNames(
+        s[`header-${langeniusVersionInfo.current_env}`],
+        'flex flex-1 items-center justify-between px-4',
+      )}>
+        <div className='flex items-center'>
+          {isMobile && <div
+            className='flex items-center justify-center h-8 w-8 cursor-pointer'
+            onClick={toggle}
+          >
+            <Bars3Icon className="h-4 w-4 text-gray-500" />
+          </div>}
+          {!isMobile && <>
+            <Link href="/apps" className='flex items-center mr-4'>
+              <LogoSite />
+            </Link>
+            <GithubStar />
+          </>}
+        </div>
+        {isMobile && (
+          <div className='flex'>
+            <Link href="/apps" className='flex items-center mr-4'>
+              <LogoSite />
+            </Link>
+            <GithubStar />
+          </div>
+        )}
+        {!isMobile && (
+          <div className='flex items-center'>
+            <ExploreNav className={navClassName} />
+            <AppNav />
+            {isCurrentWorkspaceManager && <DatasetNav />}
+          </div>
+        )}
+        <div className='flex items-center flex-shrink-0'>
+          <EnvNav />
+          <WorkspaceProvider>
+            <AccountDropdown isMobile={isMobile} />
+          </WorkspaceProvider>
+        </div>
       </div>
+      {(isMobile && isShowNavMenu) && (
+        <div className='w-full flex flex-col p-2 gap-y-1'>
+          <ExploreNav className={navClassName} />
+          <AppNav />
+          {isCurrentWorkspaceManager && <DatasetNav />}
+        </div>
+      )}
     </>
   )
 }

web/app/components/header/nav/index.tsx

 
   return (
     <div className={`
-      flex items-center h-8 mr-3 px-0.5 rounded-xl text-sm shrink-0 font-medium
+      flex items-center h-8 mr-0 sm:mr-3 px-0.5 rounded-xl text-sm shrink-0 font-medium
       ${isActived && 'bg-white shadow-md font-semibold'}
       ${!curNav && !isActived && 'hover:bg-gray-200'}
     `}>

web/app/components/share/chat/index.tsx

 import AppUnavailable from '../../base/app-unavailable'
 import { checkOrSetAccessToken } from '../utils'
 import useConversation from './hooks/use-conversation'
-import s from './style.module.css'
 import { ToastContext } from '@/app/components/base/toast'
 import Sidebar from '@/app/components/share/chat/sidebar'
 import ConfigSence from '@/app/components/share/chat/config-scence'
   }
 
   return (
-    <div className='bg-gray-100'>
+    <div className='bg-gray-100 h-full'>
       {!isInstalledApp && (
         <Header
           title={siteInfo.title}
         )}
         {/* main */}
         <div className={cn(
-          isInstalledApp ? s.installedApp : 'h-[calc(100vh_-_3rem)] tablet:h-screen',
+          isInstalledApp ? 'h-full' : 'h-[calc(100vh_-_3rem)] tablet:h-screen',
           'flex-grow flex flex-col overflow-y-auto',
         )
         }>

web/app/components/share/chat/style.module.css

-.installedApp {
-  height: calc(100vh - 74px);
-}

web/app/components/share/chatbot/index.tsx

 import { checkOrSetAccessToken } from '../utils'
 import AppUnavailable from '../../base/app-unavailable'
 import useConversation from './hooks/use-conversation'
-import s from './style.module.css'
 import { ToastContext } from '@/app/components/base/toast'
 import ConfigScene from '@/app/components/share/chatbot/config-scence'
 import Header from '@/app/components/share/header'
 
       <div className={'flex bg-white overflow-hidden'}>
         <div className={cn(
-          isInstalledApp ? s.installedApp : 'h-[calc(100vh_-_3rem)]',
+          isInstalledApp ? 'h-full' : 'h-[calc(100vh_-_3rem)]',
           'flex-grow flex flex-col overflow-y-auto',
         )
         }>

web/app/components/share/chatbot/style.module.css

-.installedApp {
-  height: calc(100vh - 74px);
-}

web/app/components/share/header.tsx

     return (
       <div
         className={`
-          shrink-0 flex items-center justify-between h-12 px-3 bg-gray-100 
+          shrink-0 flex items-center justify-between h-14 px-4 bg-gray-100 
           bg-gradient-to-r from-blue-600 to-sky-500
         `}
       >
   }
 
   return (
-    <div className="shrink-0 flex items-center justify-between h-12 px-3 bg-gray-100">
+    <div className="shrink-0 flex items-center justify-between h-14 px-4 bg-gray-100">
       <div
         className='flex items-center justify-center h-8 w-8 cursor-pointer'
         onClick={() => onShowSideBar?.()}

web/app/components/share/text-generation/style.module.css

 .installedApp {
-  height: calc(100vh - 74px);
+  height: 100%;
   border-radius: 16px;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }

web/context/app-context.tsx

       isCurrentWorkspaceManager,
       mutateCurrentWorkspace,
     }}>
-      <div className='flex flex-col h-full'>
+      <div className='flex flex-col h-full overflow-y-auto'>
         {globalThis.document?.body?.getAttribute('data-public-maintenance-notice') && <MaintenanceNotice />}
-        <div ref={pageContainerRef} className='grow relative flex flex-col overflow-auto bg-gray-100'>
+        <div ref={pageContainerRef} className='grow relative flex flex-col overflow-y-auto overflow-x-hidden bg-gray-100'>
           {children}
         </div>
       </div>

web/i18n/lang/app-debug.en.ts

   operation: {
     applyConfig: 'Publish',
     resetConfig: 'Reset',
+    debugConfig: 'Debug',
     addFeature: 'Add Feature',
     automatic: 'Automatic',
     stopResponding: 'Stop responding',

web/i18n/lang/app-debug.zh.ts

   operation: {
     applyConfig: '发布',
     resetConfig: '重置',
+    debugConfig: '调试',
     addFeature: '添加功能',
     automatic: '自动编排',
     stopResponding: '停止响应',

web/i18n/lang/dataset-creation.en.ts

     sideTipP3: 'Cleaning removes unnecessary characters and formats, making datasets cleaner and easier to parse.',
     sideTipP4: 'Proper segmentation and cleaning improve model performance, providing more accurate and valuable results.',
     previewTitle: 'Preview',
+    previewTitleButton: 'Preview',
     previewButton: 'Switching to Q&A format',
     previewSwitchTipStart: 'The current segment preview is in text format, switching to a question-and-answer format preview will',
     previewSwitchTipEnd: ' consume additional tokens',

web/i18n/lang/dataset-creation.zh.ts

     sideTipP3: '清洗则是对文本进行预处理，删除不必要的字符、符号或格式，使数据集更加干净、整洁，便于模型解析。',
     sideTipP4: '通过对数据集进行适当的分段和清洗，可以提高模型在实际应用中的表现，从而为用户提供更准确、更有价值的结果。',
     previewTitle: '分段预览',
+    previewTitleButton: '预览',
     previewButton: '切换至 Q&A 形式',
     previewSwitchTipStart: '当前分段预览是文本模式，切换到 Q&A 模式将会',
     previewSwitchTipEnd: '消耗额外的 token',