From 612a63be97c2a395a0c24c1df66aac4c657f2001 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sat, 21 Dec 2024 19:58:43 +0800
Subject: [PATCH] style: refactor billing info display on mobile

---
 src/components/ServerCard.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 29af616..2b9a0b1 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -60,10 +60,11 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
         </div>
         <div className="relative flex flex-col">
           <p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}>{name}</p>
-          {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
+          <div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
         </div>
       </section>
-      <div className="flex flex-col sm:items-start items-center gap-2">
+      <div className="flex items-center gap-2 -mt-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
+      <div className="flex flex-col lg:items-start items-center gap-2">
         <section
           className={cn("grid grid-cols-5 items-center gap-3", {
             "lg:grid-cols-6 lg:gap-4": fixedTopServerName,
@@ -158,9 +159,10 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
         </div>
         <div className="relative flex flex-col">
           <p className={cn("break-all font-bold tracking-tight max-w-[108px]", showFlag ? "text-xs" : "text-sm")}>{name}</p>
-          {parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
+          <div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
         </div>
       </section>
+      <div className="flex items-center gap-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
       {parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
     </Card>
   )