diff --git a/src/client/components/monitor/MonitorInfo.tsx b/src/client/components/monitor/MonitorInfo.tsx index 9411abe..072fa73 100644 --- a/src/client/components/monitor/MonitorInfo.tsx +++ b/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 = React.memo((props) => { const [currectResponse, setCurrentResponse] = useState(0); const navigate = useNavigate(); const [showBadge, setShowBadge] = useState(false); + const isMobile = useIsMobile(); const { data: monitorInfo, @@ -171,108 +173,106 @@ export const MonitorInfo: React.FC = React.memo((props) => {
-
- {monitorInfo.name} - {monitorInfo.active === false && ( -
- {t('Stopped')} -
- )} -
-
{getMonitorLink(monitorInfo as any as MonitorInfoType)}
+ +
+ + + {monitorInfo.active ? ( + + ) : ( + + )} + + setShowBadge(true), + }, + { + type: 'divider', + }, + { + key: 'delete', + label: t('Delete'), + danger: true, + onClick: handleDelete, + }, + ], + }} + > +
- {t('Monitored for {{dayNum}} days', { - dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'), - })} +
+ {t('Monitored for {{dayNum}} days', { + dayNum: dayjs().diff(dayjs(monitorInfo.createdAt), 'days'), + })} +
+ {monitorInfo.active === false && ( +
+ {t('Stopped')} +
+ )}
-
- - - {monitorInfo.active ? ( - - ) : ( - - )} - - setShowBadge(true), - }, - { - type: 'divider', - }, - { - key: 'delete', - label: t('Delete'), - danger: true, - onClick: handleDelete, - }, - ], - }} - > -
- { setCurrentResponse(last(items)?.value ?? 0); diff --git a/src/client/hooks/useWindowSize.ts b/src/client/hooks/useWindowSize.ts index b1d90e0..e57a9b4 100644 --- a/src/client/hooks/useWindowSize.ts +++ b/src/client/hooks/useWindowSize.ts @@ -7,8 +7,8 @@ interface WindowScreenSize { function getWindowSize(): WindowScreenSize { return { - width: window.screen.width, - height: window.screen.height, + width: window.innerWidth, + height: window.innerHeight, }; } diff --git a/src/client/pages/Layout/MobileLayout.tsx b/src/client/pages/Layout/MobileLayout.tsx index faa64b3..bc21f38 100644 --- a/src/client/pages/Layout/MobileLayout.tsx +++ b/src/client/pages/Layout/MobileLayout.tsx @@ -25,8 +25,12 @@ export const MobileLayout: React.FC = React.memo((props) => {
- - @@ -35,7 +39,7 @@ export const MobileLayout: React.FC = React.memo((props) => { -
+