From 5c3194f71e77e14aa015d1a4698173ffb3c87982 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 13 Oct 2024 17:37:28 +0800
Subject: [PATCH 1/3] style: optimize element alignment

---
 components/ServerCard.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index f028720..6ab36bb 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -38,8 +38,13 @@ export default function ServerCard({
     >
       <Popover>
         <PopoverTrigger asChild>
-          <section className={"flex items-center justify-start gap-2 lg:w-28"}>
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+          <section
+            className="grid items-center gap-2 lg:w-28"
+            style={{ gridTemplateColumns: "auto 1fr auto" }}
+          >
+            <div className="flex min-w-[17px] items-center justify-center">
+              {showFlag ? <ServerFlag country_code={country_code} /> : null}
+            </div>
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -48,7 +53,7 @@ export default function ServerCard({
             >
               {name}
             </p>
-            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
+            <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
           </section>
         </PopoverTrigger>
         <PopoverContent side="top">
@@ -127,8 +132,13 @@ export default function ServerCard({
     >
       <Popover>
         <PopoverTrigger asChild>
-          <section className={"flex items-center justify-start gap-2 lg:w-28"}>
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+          <section
+            className="grid items-center gap-2 lg:w-28"
+            style={{ gridTemplateColumns: "auto 1fr auto" }}
+          >
+            <div className="flex items-center min-w-[17px] justify-center">
+              {showFlag ? <ServerFlag country_code={country_code} /> : null}
+            </div>
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -137,7 +147,7 @@ export default function ServerCard({
             >
               {name}
             </p>
-            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
+            <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
           </section>
         </PopoverTrigger>
         <PopoverContent className="w-fit p-2" side="top">

From 190a4b1894381d0fc53ea8aed4b0171500d8225a Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 13 Oct 2024 17:45:20 +0800
Subject: [PATCH 2/3] fix: text alignment

---
 components/ServerCard.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index 6ab36bb..2071cd5 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -42,7 +42,12 @@ export default function ServerCard({
             className="grid items-center gap-2 lg:w-28"
             style={{ gridTemplateColumns: "auto 1fr auto" }}
           >
-            <div className="flex min-w-[17px] items-center justify-center">
+            <div
+              className={cn(
+                "flex items-center justify-center",
+                showFlag ? "min-w-[17px]" : "min-w-0",
+              )}
+            >
               {showFlag ? <ServerFlag country_code={country_code} /> : null}
             </div>
             <p
@@ -136,7 +141,12 @@ export default function ServerCard({
             className="grid items-center gap-2 lg:w-28"
             style={{ gridTemplateColumns: "auto 1fr auto" }}
           >
-            <div className="flex items-center min-w-[17px] justify-center">
+            <div
+              className={cn(
+                "flex items-center justify-center",
+                showFlag ? "min-w-[17px]" : "min-w-0",
+              )}
+            >
               {showFlag ? <ServerFlag country_code={country_code} /> : null}
             </div>
             <p

From a4078442f51d0f9524c14edfaa2de9a4db293192 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 13 Oct 2024 17:56:59 +0800
Subject: [PATCH 3/3] style: temporarily adjust the default height of offline
 cards

---
 components/ServerCard.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index 2071cd5..36a40dc 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -131,9 +131,12 @@ export default function ServerCard({
     </Card>
   ) : (
     <Card
-      className={
-        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
-      }
+      className={cn(
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row",
+        showNetTransfer
+          ? "lg:min-h-[91px] min-h-[123px]"
+          : "lg:min-h-[61px] min-h-[93px]",
+      )}
     >
       <Popover>
         <PopoverTrigger asChild>