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] 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">