From c610b88f81ec908d94165a898b5115367be234e0 Mon Sep 17 00:00:00 2001
From: Loongphy <Loongphy@outlook.com>
Date: Sun, 29 Sep 2024 10:35:36 +0800
Subject: [PATCH] style: Optimize styles for specific width

---
 components/ServerCard.tsx | 24 ++++++++----------------
 tailwind.config.ts        |  3 +++
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index 4886a02..b96843a 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -59,51 +59,43 @@ export default function ServerCard({
           <ServerCardPopover status={props.status} host={props.host} />
         </PopoverContent>
       </Popover>
-      <section className={"grid grid-cols-5 items-center gap-3"}>
-        <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
+      <section className={"grid grid-cols-[1fr_1fr_1fr_auto_auto] items-center gap-3 md:gap-1 md-820:gap-3"}>
+        <div className={"flex min-w-14 flex-col"}>
           <p className="text-xs text-muted-foreground">{t("CPU")}</p>
           <div className="flex items-center text-xs font-semibold">
             {cpu.toFixed(2)}%
           </div>
           <ServerUsageBar value={cpu} />
         </div>
-        <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
+        <div className={"flex min-w-14 flex-col"}>
           <p className="text-xs text-muted-foreground">{t("Mem")}</p>
           <div className="flex items-center text-xs font-semibold">
             {mem.toFixed(2)}%
           </div>
           <ServerUsageBar value={mem} />
         </div>
-        <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
+        <div className={"flex min-w-14 flex-col"}>
           <p className="text-xs text-muted-foreground">{t("STG")}</p>
           <div className="flex items-center text-xs font-semibold">
             {stg.toFixed(2)}%
           </div>
           <ServerUsageBar value={stg} />
         </div>
-        <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
+        <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">{t("Upload")}</p>
           <div className="flex items-center text-xs font-semibold">
             {formattedUpSpeed.value}
             {formattedUpSpeed.unit}
           </div>
+          <div className="h-[3px]" />
         </div>
-        <div className={"flex w-14 flex-col"}>
-          {" "}
-          {/* 设置固定宽度 */}
+        <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">{t("Download")}</p>
           <div className="flex items-center text-xs font-semibold">
             {formattedDownSpeed.value}
             {formattedDownSpeed.unit}
           </div>
+          <div className="h-[3px]" />
         </div>
       </section>
     </Card>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0628323..7d9c4b1 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -19,6 +19,9 @@ const config = {
       },
     },
     extend: {
+      screens: {
+        'md-820': '820px',
+      },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
       },