perf: improve mobile display for tianji

src/client/components/DataTable.tsx

@@ -112,7 +112,7 @@ export function DataTable<TData>({
                   )}
 
                   {row.getVisibleCells().map((cell, i) => (
-                    <TableCell key={cell.id}>
+                    <TableCell key={cell.id} className="text-nowrap">
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()

src/client/components/layout/Menu.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { useRouterState } from '@tanstack/react-router';
 import { useWatch } from '@/hooks/useWatch';
+import { cn } from '@/utils/style';
 
 export const MobileLayoutMenu: React.FC<{
   list?: React.ReactNode;
@@ -16,11 +17,8 @@ export const MobileLayoutMenu: React.FC<{
     setOpen(false);
   });
 
-  if (!props.list) {
-    return <div />;
-  }
-
   return (
+    <div className={cn(props.list ? 'opacity-100' : 'opacity-0')}>
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetTrigger>
           <Button variant="outline" size="icon">
@@ -31,6 +29,7 @@ export const MobileLayoutMenu: React.FC<{
           <ScrollArea className="h-full">{props.list}</ScrollArea>
         </SheetContent>
       </Sheet>
+    </div>
   );
 });
 MobileLayoutMenu.displayName = 'MobileLayoutMenu';

src/client/components/monitor/StatusPage/index.tsx

@@ -106,7 +106,7 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
         <div
           className={clsx(
             'mx-auto overflow-auto px-4 py-8',
-            !editMode ? 'w-4/5' : 'w-2/3'
+            !editMode ? 'w-4/5 sm:w-full' : 'w-2/3'
           )}
         >
           <div className="flex">

src/client/routes/page/add.tsx

@@ -10,6 +10,7 @@ import {
   MonitorStatusPageEditForm,
   MonitorStatusPageEditFormValues,
 } from '@/components/monitor/StatusPage/EditForm';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 export const Route = createFileRoute('/page/add')({
   beforeLoad: routeAuthBeforeLoad,
@@ -47,6 +48,7 @@ function PageAddComponent() {
     <CommonWrapper
       header={<h1 className="text-xl font-bold">{t('Add Page')}</h1>}
     >
+      <ScrollArea className="h-full">
         <div className="p-4">
           <Card>
             <CardContent className="pt-4">
@@ -58,6 +60,7 @@ function PageAddComponent() {
             </CardContent>
           </Card>
         </div>
+      </ScrollArea>
     </CommonWrapper>
   );
 }