From c20613ecf750b1cdfa5cbae2b82bdfa2b8f33e53 Mon Sep 17 00:00:00 2001
From: CHENPrime <chenbprime@qq.com>
Date: Tue, 3 Jun 2025 10:34:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=20EditMonitor=20?=
 =?UTF-8?q?=E5=92=8C=20MonitorDetail=20=E7=BB=84=E4=BB=B6=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=20Card=20=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/monitors/EditMonitor.tsx   |  2 +-
 frontend/src/pages/monitors/MonitorDetail.tsx | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/monitors/EditMonitor.tsx b/frontend/src/pages/monitors/EditMonitor.tsx
index cf69dc6..15fa638 100644
--- a/frontend/src/pages/monitors/EditMonitor.tsx
+++ b/frontend/src/pages/monitors/EditMonitor.tsx
@@ -260,7 +260,7 @@ const EditMonitor = () => {
           </Heading>
         </Flex>
       </Flex>
-      <Card className="mt-4">
+      <Card className="my-4 pr-4">
         <form onSubmit={handleSubmit}>
           <Box pt="2">
             <Flex direction="column" gap="2" className="ml-4">
diff --git a/frontend/src/pages/monitors/MonitorDetail.tsx b/frontend/src/pages/monitors/MonitorDetail.tsx
index 69b7be8..13867b9 100644
--- a/frontend/src/pages/monitors/MonitorDetail.tsx
+++ b/frontend/src/pages/monitors/MonitorDetail.tsx
@@ -146,7 +146,7 @@ const MonitorDetail = () => {
 
   return (
     <Container className="sm:px-6 lg:px-[8%]">
-      <Flex justify="between" align="center">
+      <Flex justify="between" align="start" direction={{ initial: "column", sm: "row" }} gap="4">
         <Flex align="center" gap="2">
           <Button variant="secondary" onClick={() => navigate("/monitors")}>
             <ArrowLeftIcon />
@@ -178,7 +178,7 @@ const MonitorDetail = () => {
           </Button>
         </Flex>
       </Flex>
-      <Box pt="4" >
+      <Flex py="4" gap="4" direction="column" >
         <Card>
           <Flex direction="column" gap="2" className="ml-4">
             <Heading size="4">{t("monitor.detailInfo")}</Heading>
@@ -213,7 +213,7 @@ const MonitorDetail = () => {
           </Flex>
         </Card>
         {/* 添加响应时间图表 */}
-        <Card>
+        <Card className="pr-4">
           <Flex direction="column" gap="2" className="ml-4">
             <Heading size="4">{t("monitor.oneDayHistory")}</Heading>
             <Box>
@@ -221,7 +221,7 @@ const MonitorDetail = () => {
             </Box>
           </Flex>
         </Card>
-        <Card>
+        <Card className="pr-4">
           <Flex direction="column" gap="2" className="ml-4">
             <Heading size="4">{t("monitor.MonthsHistory")}</Heading>
             <Box>
@@ -229,7 +229,7 @@ const MonitorDetail = () => {
             </Box>
           </Flex>
         </Card>
-      </Box>
+      </Flex>
     </Container>
   );
 };