fix: adjust item ui

src/components/log/log-item.tsx

@@ -10,7 +10,7 @@ const Item = styled(Box)(({ theme }) => ({
   "& .time": {},
   "& .type": {
     display: "inline-block",
-    padding: "0 6px",
+    marginLeft: 8,
     textAlign: "center",
     borderRadius: 2,
     textTransform: "uppercase",
@@ -28,9 +28,13 @@ const LogItem = (props: Props) => {
 
   return (
     <Item>
-      <span className="time">{value.time}</span>
-      <span className="type">{value.type}</span>
-      <span className="data">{value.payload}</span>
+      <div>
+        <span className="time">{value.time}</span>
+        <span className="type">{value.type}</span>
+      </div>
+      <div>
+        <span className="data">{value.payload}</span>
+      </div>
     </Item>
   );
 };

src/components/rule/rule-item.tsx

@@ -2,9 +2,8 @@ import { styled, Box, Typography } from "@mui/material";
 
 const Item = styled(Box)(({ theme }) => ({
   display: "flex",
-  padding: "6px 16px",
+  padding: "4px 16px",
   color: theme.palette.text.primary,
-  marginBottom: "6px",
 }));
 
 const COLOR = [