From 5f5aa4a30dbd9d07a63053c66acf560f8849f991 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 16 Oct 2026 19:21:09 +0000
Subject: [PATCH] fix(web): match mobile server cards to the DWztv design

The design.pen regroup (#702) re-exported DWztv with the status badge
and metric pills as component instances: a 17px pill-shaped badge and
28px pills. The app still drew a 24px square-cornered badge, 31px
pills, a card shadow and a lighter address line, which pushed the
visual diff for DWztv to 4.12% (max 4%) on master.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Signed-off-by: Claude <noreply@anthropic.com>
---
 web/src/routes/Servers.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/routes/Servers.tsx b/web/src/routes/Servers.tsx
index ade11636a..30b7b7398 100644
--- a/web/src/routes/Servers.tsx
+++ b/web/src/routes/Servers.tsx
@@ -578,7 +578,7 @@ function ServerCard({
   const address = endpoint ? `${endpoint.host}:${endpoint.port}` : "—";
 
   return (
-    <Card className="border border-border bg-card p-3.5">
+    <Card className="border border-border bg-card p-3.5 shadow-none">
       {/* Row 1: Icon + Name + Address on left, Status pill on right */}
       <div className="flex items-start justify-between gap-3">
         <div className="flex min-w-0 items-center gap-3">
@@ -598,12 +598,12 @@ function ServerCard({
               {gs.metadata.name}
             </Link>
             <div className="truncate text-xs text-muted">{targetLabel(resourceTarget(gs))}</div>
-            <div className="truncate text-xs text-foreground/60 font-mono">
+            <div className="truncate text-xs text-muted font-mono">
               {address}
             </div>
           </div>
         </div>
-        <PhaseChip phase={phase} asleep={asleep} className="px-1 py-0.5 text-[11px] font-medium rounded-2xl" />
+        <PhaseChip phase={phase} asleep={asleep} className="px-1 py-0.5 text-[11px] leading-[13px] font-medium rounded-full" />
       </div>
 
       {/* Row 2: Game label */}
@@ -622,7 +622,7 @@ function ServerCard({
 
 function StatChip({ icon, value }: { icon: ReactNode; value: ReactNode }) {
   return (
-    <span className="inline-flex items-center gap-2 rounded-full border border-border px-3.5 py-1.5 text-[12px] text-muted">
+    <span className="inline-flex items-center gap-2 rounded-full border border-border px-3.5 py-[5px] text-[12px] leading-4 text-muted">
       {icon}
       <span className="font-mono">{value}</span>
     </span>