fix web style (#684)

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

@@ -51,7 +51,7 @@ const Apps = () => {
   }, [])
 
   return (
-    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
+    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
       {data?.map(({ data: apps }) => apps.map(app => (
         <AppCard key={app.id} app={app} onDelete={mutate} />
       )))}

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

@@ -40,7 +40,7 @@ const Datasets = () => {
   }, [])
 
   return (
-    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
+    <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0'>
       {data?.map(({ data: datasets }) => datasets.map(dataset => (
         <DatasetCard key={dataset.id} dataset={dataset} onDelete={mutate} />),
       ))}

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

@@ -76,14 +76,14 @@ export default function AppBasic({ icon, icon_background, name, type, hoverTip,
 
       }
       <div className="group">
-        <div className={`flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 ${textStyle?.main}`}>
+        <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 content={hoverTip} selector={`a${randomString(16)}`}>
               <InformationCircleIcon className='w-4 h-4 ml-1 text-gray-400' />
             </Tooltip>}
         </div>
-        <div className={`text-xs font-normal text-gray-500 group-hover:text-gray-700 ${textStyle?.extra}`}>{type}</div>
+        <div className={`text-xs font-normal text-gray-500 group-hover:text-gray-700 break-all ${textStyle?.extra ?? ''}`}>{type}</div>
       </div>
     </div>
   )