feat: fe mobile responsive next (#1609)

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

@@ -70,7 +70,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
             )
         }
       </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

@@ -76,7 +76,7 @@ const DataSourceNotion = ({
             : (
               <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

@@ -23,6 +23,7 @@ import { User01 as User01Solid, Users01 as Users01Solid } from '@/app/components
 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
@@ -42,6 +43,10 @@ export default function AccountSetting({
 }: IAccountSettingProps) {
   const [activeMenu, setActiveMenu] = useState(activeTab)
   const { t } = useTranslation()
+
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
   const menuItems = [
     {
       key: 'workspace-group',
@@ -130,9 +135,9 @@ export default function AccountSetting({
       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'>
@@ -150,7 +155,7 @@ export default function AccountSetting({
                           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>
                       ))
                     }
@@ -167,7 +172,7 @@ export default function AccountSetting({
               <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

@@ -51,13 +51,13 @@ const MembersPage = () => {
             {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

@@ -218,7 +218,7 @@ const ModelPage = () => {
         }
         <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

@@ -34,7 +34,7 @@ const ModelItem: FC<ModelItemProps> = ({
 
   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

@@ -159,7 +159,7 @@ const Form: FC<FormProps> = ({
               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

@@ -96,7 +96,7 @@ const ModelModal: FC<ModelModalProps> = ({
     <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>
@@ -113,7 +113,7 @@ const ModelModal: FC<ModelModalProps> = ({
                 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'