soroushdes/HokmPlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(game): compact trump/speed badges on mobile so the scoreboard fits
CI/CD / CI - API (dotnet build + engine sim) (push) Successful in 50s
Details
CI/CD / CI - Web (tsc + next build) (push) Successful in 1m10s
Details
CI/CD / Deploy - local stack (db + server + web) (push) Successful in 1m3s
Details

Browse Source 
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>
This commit is contained in:
soroush.asadi
2026-06-15 18:27:27 +03:30
parent 868bef0c56
commit c287c7d62c
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GameTable.tsx
+5 -5
View File
@@ -289,11 +289,11 @@ function SpeedBadge() {
<motion.div <motion.div
initial={{ scale: 0, rotate: -15 }} initial={{ scale: 0, rotate: -15 }}
animate={{ scale: 1, rotate: 0 }} 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")} title={t("speed.label")}
> >
<Zap className="size-4 fill-gold-400 text-gold-400" /> <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> </motion.div>
); );
} }
@@ -307,14 +307,14 @@ function TrumpBadge({ trump }: { trump: Suit }) {
<motion.div <motion.div
initial={{ scale: 0, rotate: -20 }} initial={{ scale: 0, rotate: -20 }}
animate={{ scale: 1, rotate: 0 }} 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")} {t("trump.label")}
</span> </span>
<span <span
className={cn( className={cn(
"text-2xl leading-none", "text-xl sm:text-2xl leading-none",
red ? "text-rose-400" : "text-cream" red ? "text-rose-400" : "text-cream"
)} )}
> >