From c287c7d62cfbda1df4d1e4d48f0ccec508b0ecca Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Mon, 15 Jun 2026 18:27:27 +0330
Subject: [PATCH] ui(game): compact trump/speed badges on mobile so the
 scoreboard fits

On narrow phones the top HUD crowded the scoreboard against the trump/speed
badges + action buttons. The badges now show icon/symbol-only on mobile (labels
hidden < sm) with tighter padding, freeing horizontal space so the scoreboard
renders cleanly. Buttons stay shrink-0; scoreboard keeps shrink min-w-0.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/GameTable.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/GameTable.tsx b/src/components/GameTable.tsx
index a114741..d105254 100644
--- a/src/components/GameTable.tsx
+++ b/src/components/GameTable.tsx
@@ -289,11 +289,11 @@ function SpeedBadge() {
     <motion.div
       initial={{ scale: 0, rotate: -15 }}
       animate={{ scale: 1, rotate: 0 }}
-      className="glass rounded-2xl px-2.5 py-2 flex items-center gap-1 text-gold-300"
+      className="glass rounded-2xl px-2 py-1.5 sm:px-2.5 sm:py-2 flex items-center gap-1 text-gold-300 shrink-0"
       title={t("speed.label")}
     >
       <Zap className="size-4 fill-gold-400 text-gold-400" />
-      <span className="text-[10px] font-black uppercase tracking-wide">{t("speed.label")}</span>
+      <span className="hidden sm:inline text-[10px] font-black uppercase tracking-wide">{t("speed.label")}</span>
     </motion.div>
   );
 }
@@ -307,14 +307,14 @@ function TrumpBadge({ trump }: { trump: Suit }) {
     <motion.div
       initial={{ scale: 0, rotate: -20 }}
       animate={{ scale: 1, rotate: 0 }}
-      className="glass rounded-2xl px-3 py-2 flex items-center gap-2"
+      className="glass rounded-2xl px-2 py-1.5 sm:px-3 sm:py-2 flex items-center gap-1.5 sm:gap-2 shrink-0"
     >
-      <span className="text-[10px] text-gold-400 font-semibold">
+      <span className="hidden sm:inline text-[10px] text-gold-400 font-semibold">
         {t("trump.label")}
       </span>
       <span
         className={cn(
-          "text-2xl leading-none",
+          "text-xl sm:text-2xl leading-none",
           red ? "text-rose-400" : "text-cream"
         )}
       >