From 12177d2a3338f7794c256cb255b1fff9c60d6c47 Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Sun, 7 Jun 2026 07:08:12 +0330
Subject: [PATCH] fix(mobile): smaller trick cards on phones; drop duplicate XP
 bar on Profile

- Game table: played-card pile now uses sm cards on phones (vw<480) + slightly
  tighter scale, so the center trick no longer crowds/overlaps the side seats'
  avatars on a tall portrait screen.
- Profile: the screen showed two XP bars (the global header bar + the identity
  card's detailed bar). Hide the header bar on Profile (showXp=false).

Verified: tsc + next build clean; web rebuilt on :1500.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/GameTable.tsx             | 10 +++++++---
 src/components/screens/ProfileScreen.tsx |  3 ++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/GameTable.tsx b/src/components/GameTable.tsx
index a33d8bc..9ddcf3c 100644
--- a/src/components/GameTable.tsx
+++ b/src/components/GameTable.tsx
@@ -65,7 +65,9 @@ export function GameTable({
   const exit = onExit ?? reset;
   const vw = useViewportWidth();
   // Pull the played-card pile inward on narrow screens so it clears the side stacks.
-  const trickScale = vw < 360 ? 0.5 : vw < 460 ? 0.64 : 1;
+  const trickScale = vw < 360 ? 0.5 : vw < 460 ? 0.6 : 1;
+  // Smaller played cards on phones so the center pile stays clear of the side seats.
+  const trickCardSize: "sm" | "md" = vw < 480 ? "sm" : "md";
   const { phase, players, hakem, trump, turn, currentTrick } = game;
 
   const legalMovesList = useMemo(
@@ -196,7 +198,7 @@ export function GameTable({
           <OpponentHand seat={3} className="absolute top-1/2 left-14 sm:left-16 -translate-y-1/2" />
 
           {/* center trick area (offsets scale down on narrow screens) */}
-          <TrickArea trick={currentTrick} winner={game.lastTrickWinner} phase={phase} scale={trickScale} />
+          <TrickArea trick={currentTrick} winner={game.lastTrickWinner} phase={phase} scale={trickScale} cardSize={trickCardSize} />
         </div>
       </div>
 
@@ -426,11 +428,13 @@ function TrickArea({
   winner,
   phase,
   scale = 1,
+  cardSize = "md",
 }: {
   trick: { seat: Seat; card: Card }[];
   winner: Seat | null;
   phase: string;
   scale?: number;
+  cardSize?: "sm" | "md" | "lg";
 }) {
   const { front } = useCardSkins();
   return (
@@ -455,7 +459,7 @@ function TrickArea({
                     : undefined,
                 }}
               >
-                <PlayingCard card={pc.card} size="md" front={front} />
+                <PlayingCard card={pc.card} size={cardSize} front={front} />
               </motion.div>
             );
           })}
diff --git a/src/components/screens/ProfileScreen.tsx b/src/components/screens/ProfileScreen.tsx
index bfa6749..141fe55 100644
--- a/src/components/screens/ProfileScreen.tsx
+++ b/src/components/screens/ProfileScreen.tsx
@@ -65,7 +65,8 @@ export function ProfileScreen() {
 
   return (
     <ScreenShell>
-      <ScreenHeader title={t("profile.title")} />
+      {/* showXp=false: the identity card below already has a detailed XP bar. */}
+      <ScreenHeader title={t("profile.title")} showXp={false} />
 
       {/* identity */}
       <motion.div