From 1cb56973aac611df8cfddc1b1f7e128805e0d0a8 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 4 Dec 2024 17:37:38 +0800
Subject: [PATCH] style: network display

---
 src/components/Header.tsx         |  4 ++--
 src/components/ServerOverview.tsx | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3addd6e..ad948d7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -52,7 +52,7 @@ function Header() {
         (handlers[element.tagName] || handlers.DEFAULT)(element);
       } else if (node.nodeType === Node.TEXT_NODE) {
         document.body.appendChild(
-          document.createTextNode(node.textContent || "")
+          document.createTextNode(node.textContent || ""),
         );
       }
     });
@@ -155,7 +155,7 @@ function Overview() {
   const timeOption = DateTime.TIME_SIMPLE;
   timeOption.hour12 = true;
   const [timeString, setTimeString] = useState(
-    DateTime.now().setLocale("en-US").toLocaleString(timeOption)
+    DateTime.now().setLocale("en-US").toLocaleString(timeOption),
   );
   useInterval(() => {
     setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
diff --git a/src/components/ServerOverview.tsx b/src/components/ServerOverview.tsx
index 2cdf359..623f2c9 100644
--- a/src/components/ServerOverview.tsx
+++ b/src/components/ServerOverview.tsx
@@ -98,21 +98,21 @@ export default function ServerOverview({
                 <p className="text-sm font-medium md:text-base">
                   {t("serverOverview.network")}
                 </p>
-                <section className="flex flex-row z-[999] sm:items-center items-start pr-2 sm:pr-0 gap-1 ml-auto">
-                  <p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400   text-nowrap font-medium">
-                    ↑{formatBytes(up)}
-                  </p>
-                  <p className="sm:text-[12px] text-[10px]  text-purple-800 dark:text-purple-400  text-nowrap font-medium">
-                    ↓{formatBytes(down)}
-                  </p>
-                </section>
               </div>
-              <section className="flex flex-row mt-1.5 -mr-1 sm:items-center items-start gap-1">
-                <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
+              <section className="flex items-start flex-row z-[999] pr-2 sm:pr-0 gap-1">
+                <p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400   text-nowrap font-medium">
+                  ↑{formatBytes(up)}
+                </p>
+                <p className="sm:text-[12px] text-[10px]  text-purple-800 dark:text-purple-400  text-nowrap font-medium">
+                  ↓{formatBytes(down)}
+                </p>
+              </section>
+              <section className="flex flex-col sm:flex-row -mr-1 sm:items-center items-start gap-1">
+                <p className="text-[11px] flex items-center text-nowrap font-semibold">
                   <ArrowUpCircleIcon className="size-3 mr-0.5 sm:mb-[1px]" />
                   {formatBytes(upSpeed)}/s
                 </p>
-                <p className="sm:text-[12px] flex items-center text-[10px] text-nowrap font-semibold">
+                <p className="text-[11px] flex items-center  text-nowrap font-semibold">
                   <ArrowDownCircleIcon className="size-3 mr-0.5" />
                   {formatBytes(downSpeed)}/s
                 </p>