From abc55479e43b8f6f0613d5bec7c6cbc001e40198 Mon Sep 17 00:00:00 2001
From: Walter Oggioni <oggioni.walter@gmail.com>
Date: Tue, 22 Sep 2026 08:36:14 +0800
Subject: [PATCH] Rename the playing-card CSS class away from Bootstrap's
 .card-img

Bootstrap 5.3 ships .card-img{width:100%} for images inside cards, which
collided with the similarly named class emitted by the card helpers:
every card image stretched to its container width, so the table cards
wrapped one per flex line and pushed the player's hand below the
viewport. Emit 'playing-card' instead and rename the six selectors in
style.css; callers keep passing only the size modifiers.
---
 web/src/components/card.rs |  4 ++--
 web/style.css              | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/card.rs b/web/src/components/card.rs
index 5dc3f6d..866c364 100644
--- a/web/src/components/card.rs
+++ b/web/src/components/card.rs
@@ -9,13 +9,13 @@ pub fn card_img(code: String, class: &'static str) -> View {
     let src = card_asset(&code);
     let alt = card_label(&code);
     view! {
-        img(src=src, class=format!("card-img {class}"), alt=alt, draggable="false")
+        img(src=src, class=format!("playing-card {class}"), alt=alt, draggable="false")
     }
 }
 
 /// Render the back of a card (used for opponents' hidden hands).
 pub fn card_back(class: &'static str) -> View {
     view! {
-        img(src=CARD_BACK, class=format!("card-img {class}"), alt="card back", draggable="false")
+        img(src=CARD_BACK, class=format!("playing-card {class}"), alt="card back", draggable="false")
     }
 }
diff --git a/web/style.css b/web/style.css
index fea06d5..cae77df 100644
--- a/web/style.css
+++ b/web/style.css
@@ -185,27 +185,27 @@ body {
 
 /* ---------- cards ---------- */
 
-.card-img {
+.playing-card {
     border-radius: 6px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
     background: #fff;
     user-select: none;
 }
 
-.card-img.mini {
+.playing-card.mini {
     height: 34px;
 }
 
-.card-img.move-card {
+.playing-card.move-card {
     height: 54px;
     vertical-align: middle;
 }
 
-.card-img.table-card {
+.playing-card.table-card {
     height: 84px;
 }
 
-.card-img.hand-card {
+.playing-card.hand-card {
     height: 120px;
 }
 
@@ -355,7 +355,7 @@ body {
     justify-content: center;
 }
 
-.card-img.score-mini {
+.playing-card.score-mini {
     height: 38px;
 }