refactor: improve mobile display for monitor and base layout

src/client/components/monitor/MonitorInfo.tsx

@@ -22,6 +22,7 @@ import { DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { MonitorBadgeView } from './MonitorBadgeView';
 import { useTranslation } from '@i18next-toolkit/react';
 import { useNavigate } from '@tanstack/react-router';
+import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface MonitorInfoProps {
   monitorId: string;
@@ -33,6 +34,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   const [currectResponse, setCurrentResponse] = useState(0);
   const navigate = useNavigate();
   const [showBadge, setShowBadge] = useState(false);
+  const isMobile = useIsMobile();
 
   const {
     data: monitorInfo,
@@ -171,29 +173,12 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
         <Space className="w-full" direction="vertical">
           <div className="flex justify-between">
             <Space direction="vertical">
-              <div className="flex items-center gap-2 text-2xl">
-                <span>{monitorInfo.name}</span>
-                {monitorInfo.active === false && (
-                  <div className="rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
-                    {t('Stopped')}
-                  </div>
-                )}
-              </div>
-
               <div>
                 <ColorTag label={monitorInfo.type} />
                 <span>
                   {getMonitorLink(monitorInfo as any as MonitorInfoType)}
                 </span>
               </div>
-            </Space>
-
-            <div className="text-black text-opacity-75 dark:text-gray-200">
-              {t('Monitored for {{dayNum}} days', {
-                dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),
-              })}
-            </div>
-          </div>
 
               <div className="flex gap-2">
                 <Button
@@ -265,14 +250,29 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
                   />
                 </Modal>
               </div>
+            </Space>
+
+            <div className="text-black text-opacity-75 dark:text-gray-200">
+              <div>
+                {t('Monitored for {{dayNum}} days', {
+                  dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'),
+                })}
+              </div>
+              {monitorInfo.active === false && (
+                <div className="inline-block rounded-full bg-red-500 px-2 py-0.5 text-xs text-white">
+                  {t('Stopped')}
+                </div>
+              )}
+            </div>
+          </div>
 
           <Card>
             <MonitorHealthBar
               workspaceId={workspaceId}
               monitorId={monitorId}
               monitorType={monitorInfo.type}
-              count={40}
+              count={isMobile ? 30 : 40}
-              size="large"
+              size={isMobile ? 'small' : 'large'}
               showCurrentStatus={true}
               onBeatsItemUpdate={(items) => {
                 setCurrentResponse(last(items)?.value ?? 0);

src/client/hooks/useWindowSize.ts

@@ -7,8 +7,8 @@ interface WindowScreenSize {
 
 function getWindowSize(): WindowScreenSize {
   return {
-    width: window.screen.width,
+    width: window.innerWidth,
-    height: window.screen.height,
+    height: window.innerHeight,
   };
 }
 

src/client/pages/Layout/MobileLayout.tsx

@@ -25,8 +25,12 @@ export const MobileLayout: React.FC<LayoutProps> = React.memo((props) => {
     <div className="flex h-svh flex-col">
       <div className="flex h-[52px] items-center justify-between px-2">
         <Sheet>
-          <SheetTrigger>
+          <SheetTrigger disabled={!Boolean(props.list)}>
-            <Button variant="outline" size="icon">
+            <Button
+              variant="outline"
+              size="icon"
+              disabled={!Boolean(props.list)}
+            >
               <LuMenu />
             </Button>
           </SheetTrigger>
@@ -35,7 +39,7 @@ export const MobileLayout: React.FC<LayoutProps> = React.memo((props) => {
           </SheetContent>
         </Sheet>
 
-        <div>
+        <div className="rounded-md dark:bg-white/10">
           <img className="m-auto h-8 w-8" src="/icon.svg" />
         </div>