fix: batch mobile layout fixes (#1641)

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

@@ -30,31 +30,29 @@ const AppCard = ({
   const { t } = useTranslation()
   const { app: appBasicInfo } = app
   return (
-    <div className={s.wrap}>
-      <div className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
-        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
-          <AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
-          <div className='relative h-8 text-sm font-medium leading-8 grow'>
-            <div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
-          </div>
+    <div className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
+      <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <AppIcon size='small' icon={app.app.icon} background={app.app.icon_background} />
+        <div className='relative h-8 text-sm font-medium leading-8 grow'>
+          <div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{appBasicInfo.name}</div>
         </div>
-        <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
-        <div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
-          <div className={s.mode}>
-            <AppModeLabel mode={appBasicInfo.mode} />
-          </div>
-          <div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
-            <Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(appBasicInfo.id)}>
-              <PlusIcon className='w-4 h-4 mr-1' />
-              <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
+      </div>
+      <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.description}</div>
+      <div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
+        <div className={s.mode}>
+          <AppModeLabel mode={appBasicInfo.mode} />
+        </div>
+        <div className={cn(s.opWrap, 'flex items-center w-full space-x-2')}>
+          <Button type='primary' className='grow flex items-center !h-7' onClick={() => onAddToWorkspace(appBasicInfo.id)}>
+            <PlusIcon className='w-4 h-4 mr-1' />
+            <span className='text-xs'>{t('explore.appCard.addToWorkspace')}</span>
+          </Button>
+          {canCreate && (
+            <Button className='grow flex items-center !h-7 space-x-1' onClick={onCreate}>
+              {CustomizeBtn}
+              <span className='text-xs'>{t('explore.appCard.customize')}</span>
             </Button>
-            {canCreate && (
-              <Button className='grow flex items-center !h-7 space-x-1' onClick={onCreate}>
-                {CustomizeBtn}
-                <span className='text-xs'>{t('explore.appCard.customize')}</span>
-              </Button>
-            )}
-          </div>
+          )}
         </div>
       </div>
     </div>

web/app/components/explore/app-card/style.module.css

@@ -1,7 +1,3 @@
-.wrap {
-  min-width: 312px;
-}
-
 .mode {
   display: flex;
   height: 28px;

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

@@ -97,14 +97,9 @@ const Apps: FC = () => {
         value={currCategory}
         onChange={setCurrCategory}
       />
-      <div
-        className='flex mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'
-        style={{
-          maxHeight: 'calc(100vh - 243px)',
-        }}
-      >
+      <div className='flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow'>
         <nav
-          className={`${s.appList} grid content-start gap-4 px-12 shrink-0`}>
+          className={`${s.appList} grid content-start gap-4 px-6 sm:px-12 shrink-0`}>
           {currList.map(app => (
             <AppCard
               key={app.app_id}

web/app/components/explore/index.tsx

@@ -33,7 +33,7 @@ const Explore: FC<IExploreProps> = ({
   }, [])
 
   return (
-    <div className='flex h-full bg-gray-100 border-t border-gray-200'>
+    <div className='flex h-full bg-gray-100 border-t border-gray-200 overflow-hidden'>
       <ExploreContext.Provider
         value={
           {