feat: redesign player card and pitch for better scaling

Enlarge pitch and player card dimensions; fix badge scaling on mobile.

Co-authored-by: Anay <129646663+anay1104@users.noreply.github.com>

frontend/src/components/PitchView.jsx

@@ -3,18 +3,31 @@ import React, { useRef, useState, useEffect, useCallback } from "react";
 import { DraggablePlayer } from "./DraggablePlayer";
 
 /*
-  DESIGN DIMENSIONS
-  Card slot height = CARD_H(80) + mt(1) + label(48) = 129px
-  4 starter rows   = 516px
-  STARTERS_H = 660: usable = 660-48(py-6) = 612, leaves 96px = ~19px × 5 gaps via justify-evenly ✓
-  BENCH_H    = 180: card(80) + label(48) + mt(1) + pt(16) + pb(35) = 180 ✓
-  DESIGN_WIDTH = 680: fits 5 cards × 88px + 4 gaps × 40px = 440 + 160 = 600px + 40px padding ✓
+  DESIGN DIMENSIONS — single source of truth for the pitch.
+  All cards are laid out at these fixed pixel dimensions and the whole pitch
+  is uniformly transform-scaled to fit the actual container. This keeps
+  proportions identical across every screen size (no element gets relatively
+  bigger or smaller than another when the viewport changes).
+
+  Card slot height = CARD_H(104) + mt(1) + label(~50) = 155px
+  4 starter rows   = 620px content + 48px py-padding + 5 evenly-distributed gaps
+  STARTERS_H = 760 → ~18px between rows via justify-evenly ✓
+  BENCH_H    = 210 → card(104) + label(50) + mt(1) + pt(16) + pb(32) = 203 + slack ✓
+
+  DESIGN_WIDTH = 600: fits widest row (5 mids/defs) = 5×84 + 4×24 = 516 ≤ 600 ✓
+  Bench (4 cards): 4×84 + 3×24 + 48px padding = 456 ≤ 600 ✓
+
+  MAX_SCALE > 1 lets the pitch grow modestly on wide desktops instead of
+  capping at design size and looking marooned in whitespace.
 */
-const DESIGN_WIDTH = 520;
-const STARTERS_H   = 660;
-const BENCH_H      = 180;
+const DESIGN_WIDTH = 600;
+const STARTERS_H   = 760;
+const BENCH_H      = 210;
 // Gap between player card wrappers in px (in design space)
 const CARD_GAP     = 24;
+// Allow the pitch to scale up to 1.1× on wide screens so cards don't look
+// undersized on desktop. Below DESIGN_WIDTH it scales down naturally to fit.
+const MAX_SCALE    = 1.1;
 
 export const PitchView = ({
   teamData,
@@ -39,7 +52,10 @@ export const PitchView = ({
   const updateScale = useCallback(() => {
     if (!containerRef.current) return;
     const w = containerRef.current.offsetWidth;
-    setScale(Math.min(1, w / DESIGN_WIDTH));
+    // Allow scaling up to MAX_SCALE on wider screens; scale down proportionally
+    // on narrow screens. This keeps every element (cards, badges, text)
+    // visually consistent at any viewport.
+    setScale(Math.min(MAX_SCALE, w / DESIGN_WIDTH));
   }, []);
 
   useEffect(() => {
@@ -180,4 +196,4 @@ export const PitchView = ({
       </div>
     </div>
   );
-};
+};

frontend/src/components/PlayerCardVisual.jsx

@@ -4,9 +4,17 @@ import { getShortName } from "../utils/teams";
 import { getPlayerPrice } from "../utils/fplLogic";
 import { PlayerContext } from "../PlayerContext";
 
-// Fixed card dimensions — these are design-space pixels (before PitchView scaling)
-const CARD_W = 72;
-const CARD_H = 88; // photo card height only (label strip is separate, in flow below)
+// Fixed card dimensions — these are design-space pixels (before PitchView scaling).
+// Sized to match the reference aesthetic: roughly 1.24:1 height-to-width photo
+// area, large enough that the player photo, EV, and C/V badges all read clearly
+// at design scale, and that scale down gracefully on narrow viewports because
+// the entire pitch is uniformly transform-scaled by PitchView.
+const CARD_W = 84;
+const CARD_H = 104; // photo card height only (label strip is separate, in flow below)
+// Badge dimensions for C / V / Reset stack. Kept compact (~15% of card width)
+// so they never visually overpower the photo, and use a large enough font that
+// mobile browsers don't auto-inflate it (the cause of "huge badges on mobile").
+const BADGE_SIZE = 13;
 
 export const PlayerCardVisual = ({
   player,
@@ -31,24 +39,28 @@ export const PlayerCardVisual = ({
           className="relative flex flex-col items-center justify-center cursor-pointer border-2 border-dashed border-slate-500 bg-slate-900/60 rounded-xl hover:bg-slate-800 hover:border-emerald-400 transition-all z-20 shadow-inner group"
         >
           {player.replacedPlayer && (
-            <div className="absolute left-[1px] top-[1px] flex flex-col gap-[1px] z-40 pointer-events-auto">
+            <div
+              className="absolute left-[2px] top-[2px] flex flex-col gap-[2px] z-40 pointer-events-auto"
+              style={{ WebkitTextSizeAdjust: "100%" }}
+            >
               <button
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => onUndo(e, player.ID, player.replacedPlayer)}
-                className="w-[11px] h-[11px] flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transition-colors border border-red-400 shadow-lg"
+                style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
+                className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transition-colors border border-red-400 shadow-lg"
                 title="Undo transfer"
               >
-                <RotateCcw size={8} strokeWidth={3} />
+                <RotateCcw size={9} strokeWidth={3} />
               </button>
             </div>
           )}
-          <Plus className="text-slate-500 group-hover:text-emerald-400 transition-colors mb-1" size={20} />
-          <span className="text-[8px] font-black text-slate-500 group-hover:text-emerald-400 uppercase tracking-widest">
+          <Plus className="text-slate-500 group-hover:text-emerald-400 transition-colors mb-1" size={22} />
+          <span className="text-[9px] font-black text-slate-500 group-hover:text-emerald-400 uppercase tracking-widest">
             {player.Pos}
           </span>
         </div>
         {/* Placeholder label area so blank slots have identical height to real cards */}
-        <div style={{ height: 48 }} />
+        <div style={{ height: 50 }} />
       </div>
     );
   }
@@ -129,10 +141,12 @@ export const PlayerCardVisual = ({
     });
   };
 
+  // EV text sizes — bumped slightly to match the larger card. Primary GW gets
+  // the strongest visual weight, subsequent GWs taper down for hierarchy.
   const evStyles = [
-    "text-emerald-400 text-[11px] font-extrabold",
-    "text-emerald-500 text-[9px] font-bold",
-    "text-emerald-600 text-[7px] font-semibold",
+    "text-emerald-400 text-[12px] font-extrabold",
+    "text-emerald-500 text-[10px] font-bold",
+    "text-emerald-600 text-[8px] font-semibold",
   ];
 
   const isTransferIn = Boolean(player.replacedPlayer || onSolverUndo);
@@ -158,17 +172,29 @@ export const PlayerCardVisual = ({
         `}
         style={{ width: CARD_W, height: CARD_H }}
       >
-        {/* C / V buttons — small by design; PitchView scale handles mobile shrinking */}
-        <div className="absolute left-[1px] top-[1px] flex flex-col gap-[1px] z-40 pointer-events-auto">
+        {/*
+          C / V / Reset stack.
+          - Sized via the BADGE_SIZE constant so all three badges always match.
+          - WebkitTextSizeAdjust: "100%" stops iOS Safari from auto-enlarging
+            the small label text, which was the root cause of the badges
+            looking oversized and obstructing other players on mobile.
+          - The whole stack lives inside PitchView's scale transform, so it
+            shrinks/grows uniformly with the rest of the pitch.
+        */}
+        <div
+          className="absolute left-[2px] top-[2px] flex flex-col gap-[2px] z-40 pointer-events-auto"
+          style={{ WebkitTextSizeAdjust: "100%" }}
+        >
           {!isBench && handleCapChange && (
             <>
               <button
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => { e.stopPropagation(); handleCapChange(player.ID, "C"); }}
-                className={`w-[11px] h-[11px] flex items-center justify-center rounded-full text-[6px] font-bold transition-colors shadow-md transform-gpu
+                style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
+                className={`flex items-center justify-center rounded-full text-[7px] font-bold leading-none transition-colors shadow-md transform-gpu
                   ${isCap
                     ? activeChipType === "tc"
-                      ? "bg-purple-500 text-white border border-purple-300 text-[7px]"
+                      ? "bg-purple-500 text-white border border-purple-300 text-[8px]"
                       : "bg-yellow-400 text-slate-900 border border-white"
                     : "bg-slate-900/90 text-slate-400 border border-slate-700 hover:text-yellow-400"
                   }`}
@@ -178,7 +204,8 @@ export const PlayerCardVisual = ({
               <button
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => { e.stopPropagation(); handleCapChange(player.ID, "V"); }}
-                className={`w-[11px] h-[11px] flex items-center justify-center rounded-full text-[6px] font-bold transition-colors shadow-md
+                style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
+                className={`flex items-center justify-center rounded-full text-[7px] font-bold leading-none transition-colors shadow-md
                   ${isVice ? "bg-slate-300 text-slate-900 border border-white" : "bg-slate-900/90 text-slate-400 border border-slate-700 hover:text-white"}`}
               >
                 V
@@ -189,23 +216,30 @@ export const PlayerCardVisual = ({
             <button
               onPointerDown={(e) => e.stopPropagation()}
               onClick={(e) => { e.stopPropagation(); onSolverUndo(player); }}
-              className="w-[11px] h-[11px] flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400"
+              style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
+              className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400 shadow-md"
             >
-              <RotateCcw size={8} strokeWidth={3} />
+              <RotateCcw size={9} strokeWidth={3} />
             </button>
           ) : player.replacedPlayer ? (
             <button
               onPointerDown={(e) => e.stopPropagation()}
               onClick={(e) => onUndo(e, player.ID, player.replacedPlayer)}
-              className="w-[11px] h-[11px] flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400"
+              style={{ width: BADGE_SIZE, height: BADGE_SIZE }}
+              className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400 shadow-md"
             >
-              <RotateCcw size={8} strokeWidth={3} />
+              <RotateCcw size={9} strokeWidth={3} />
             </button>
           ) : null}
         </div>
 
-        {/* EV numbers — pulled closer to card edge */}
-        <div className="absolute right-[2px] top-[2px] flex flex-col items-end z-30 pointer-events-none drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]">
+        {/* EV numbers — pulled to the top-right corner. Slightly larger than
+            before to match the larger card; the primary EV is most prominent
+            and subsequent gameweeks gradually de-emphasize. */}
+        <div
+          className="absolute right-[3px] top-[2px] flex flex-col items-end z-30 pointer-events-none drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]"
+          style={{ WebkitTextSizeAdjust: "100%" }}
+        >
           {playerCardGWs.map((gw, i) => (
             <span key={gw} className={`${evStyles[i]} leading-tight tabular-nums`}>
               {Number(player[`${gw}_Pts`] || 0).toFixed(2)}
@@ -234,27 +268,36 @@ export const PlayerCardVisual = ({
         )}
       </div>
 
-      {/* ── LABEL STRIP — in normal flow below the card ── */}
+      {/*
+        LABEL STRIP — in normal flow below the photo card.
+        Width is 110% of CARD_W (≈92px @ design) so the strip slightly
+        overhangs the card for that classic FPL look, while still fitting
+        comfortably inside the CARD_GAP (24px) so neighbouring labels never
+        collide on any viewport.
+        WebkitTextSizeAdjust: "100%" prevents iOS Safari from inflating the
+        small label text — without this the name/stats wrap or overflow on
+        mobile.
+      */}
       <div
         draggable="false"
         className={`flex flex-col items-center z-30 pointer-events-none mt-[1px] flex-shrink-0 ${isBench ? "opacity-80" : "opacity-100"}`}
-        style={{ width: "110%" }} // 110% of 88px = 97px — fits in 88+40=128px slot gap
+        style={{ width: "110%", WebkitTextSizeAdjust: "100%" }}
       >
-        <div className={`w-full text-center py-[2px] truncate px-1 font-bold text-[8px] rounded-t shadow-md
+        <div className={`w-full text-center py-[2px] truncate px-1 font-bold text-[9px] leading-tight rounded-t shadow-md
           ${isTransferIn ? "bg-cyan-600 text-white" : "bg-slate-950 text-slate-100 border border-slate-700"}`}>
           {player.Name}
         </div>
         <div className="w-full bg-slate-200 border-x border-slate-700 flex justify-center items-center gap-1 py-[2px] shadow-inner">
-          <span className={`text-[8px] font-black flex items-baseline gap-[2px] ${isBlankThisGw ? "text-slate-400" : "text-slate-800"}`}>
+          <span className={`text-[9px] font-black flex items-baseline gap-[2px] leading-none ${isBlankThisGw ? "text-slate-400" : "text-slate-800"}`}>
             {isBlankThisGw ? "-" : (player[`${activeGW}_xMins`] ?? 90)}
-            <span className="text-[6px] font-bold text-slate-500 uppercase tracking-tight">xMins</span>
+            <span className="text-[7px] font-bold text-slate-500 uppercase tracking-tight">xMins</span>
           </span>
-          <span className="text-slate-400 font-light text-[8px]">|</span>
-          <span className="text-[8px] font-black text-emerald-700">
+          <span className="text-slate-400 font-light text-[9px] leading-none">|</span>
+          <span className="text-[9px] font-black text-emerald-700 leading-none">
             £{getPlayerPrice(player).toFixed(1)}
           </span>
         </div>
-        <div className="w-full bg-slate-900 border-x border-b border-slate-700 flex items-center rounded-b shadow-md px-0.5 overflow-hidden" style={{ height: 17 }}>
+        <div className="w-full bg-slate-900 border-x border-b border-slate-700 flex items-center rounded-b shadow-md px-0.5 overflow-hidden" style={{ height: 19 }}>
           <div className="flex items-center justify-center w-full whitespace-nowrap overflow-hidden">
             {renderFixtures(player.Team, activeGW)}
           </div>
@@ -264,4 +307,4 @@ export const PlayerCardVisual = ({
   );
 };
 
-export default memo(PlayerCardVisual);
+export default memo(PlayerCardVisual);