feat: implement counter-scale for badge size adjustment

Decouple badge size from card width and pitch scale for consistent visual size.

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

frontend/src/components/DraggablePlayer.jsx

@@ -20,6 +20,7 @@ export const DraggablePlayer = ({
   isHighlighted,
   onSolverUndo,
   activeChipType,
+  pitchScale,
 }) => {
   const disableBenchGkDrag = Boolean(
     isBench && benchIndex === 0 && player.Pos === "G" && !player.isBlank,
@@ -72,7 +73,8 @@ export const DraggablePlayer = ({
         onUndo={onUndo}
         onSolverUndo={onSolverUndo}
         activeChipType={activeChipType}
+        pitchScale={pitchScale}
       />
     </div>
   );
-};
+};

frontend/src/components/PitchView.jsx

@@ -140,6 +140,7 @@ export const PitchView = ({
                     isHighlighted={Array.from(highlightTransferIds[activeGW] || []).includes(p.ID)}
                     onSolverUndo={(solverTransferPairs[activeGW] || {})[p.ID] ? () => resetHighlightedTransfer(p) : undefined}
                     activeChipType={chipsByGw[activeGW]}
+                    pitchScale={scale}
                   />
                 ))}
               </div>
@@ -190,6 +191,7 @@ export const PitchView = ({
               isHighlighted={Array.from(highlightTransferIds[activeGW] || []).includes(p.ID)}
               onSolverUndo={(solverTransferPairs[activeGW] || {})[p.ID] ? () => resetHighlightedTransfer(p) : undefined}
               activeChipType={chipsByGw[activeGW]}
+              pitchScale={scale}
             />
           ))}
         </div>

frontend/src/components/PlayerCardVisual.jsx

@@ -4,16 +4,16 @@ 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).
-// Modest increase from original (72×88) to improve clarity on desktop while the
-// PitchView scale transform ensures proportions stay consistent across all devices.
+// Fixed card dimensions — design-space pixels (before PitchView scale transform).
 const CARD_W = 76;
-const CARD_H = 92; // photo card height only (label strip is separate, in flow below)
+const CARD_H = 92;
 
-// Badge sizing — using percentage of card width ensures badges scale proportionally
-// with the card rather than being fixed pixels that iOS may try to inflate.
-// 12% of 76px = ~9px at design scale, but will shrink/grow with the card.
-const BADGE_PCT = 0.12;
+// The visual size (in real screen pixels) that we ALWAYS want the badges to
+// appear at, regardless of the pitch scale. By counter-scaling the badge
+// container with scale(1/pitchScale) we cancel out the parent transform, so
+// badges are always BADGE_VISUAL_PX × BADGE_VISUAL_PX on screen.
+// 16px is large enough to tap comfortably on mobile and read clearly on desktop.
+const BADGE_VISUAL_PX = 16;
 
 export const PlayerCardVisual = ({
   player,
@@ -28,7 +28,17 @@ export const PlayerCardVisual = ({
   onUndo,
   onSolverUndo,
   activeChipType,
+  pitchScale = 1,
 }) => {
+  // Counter-scale: cancel out the parent pitch transform so badges always
+  // render at BADGE_VISUAL_PX on screen regardless of zoom level.
+  // e.g. if pitch is scaled 0.6×, badges scale up by 1/0.6 = 1.667×
+  // so they still appear as 16px visually. transform-origin: top left
+  // anchors to the card's top-left corner so positioning stays correct.
+  const badgeScale = 1 / (pitchScale || 1);
+  // How much space the counter-scaled stack occupies in design-space.
+  // We offset the stack by this to avoid it overflowing the card at low scales.
+  const badgeDesignPx = BADGE_VISUAL_PX * badgeScale;
   if (player.isBlank) {
     return (
       <div className="flex flex-col items-center" style={{ width: CARD_W }}>
@@ -39,11 +49,12 @@ export const PlayerCardVisual = ({
         >
           {player.replacedPlayer && (
             <div
-              className="absolute left-[2px] top-[2px] flex flex-col gap-[1px] z-40 pointer-events-auto"
+              className="absolute z-40 pointer-events-auto"
               style={{
-                WebkitTextSizeAdjust: "none",
-                textSizeAdjust: "none",
-                fontSize: 0,
+                left: 2,
+                top: 2,
+                transformOrigin: "top left",
+                transform: `scale(${badgeScale})`,
               }}
             >
               <div
@@ -52,16 +63,14 @@ export const PlayerCardVisual = ({
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => onUndo(e, player.ID, player.replacedPlayer)}
                 style={{
-                  width: CARD_W * BADGE_PCT,
-                  height: CARD_W * BADGE_PCT,
-                  minWidth: 0,
-                  minHeight: 0,
+                  width: BADGE_VISUAL_PX,
+                  height: BADGE_VISUAL_PX,
                   touchAction: "manipulation",
                 }}
                 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 cursor-pointer select-none"
                 title="Undo transfer"
               >
-                <RotateCcw size={5} strokeWidth={3} />
+                <RotateCcw size={9} strokeWidth={2.5} />
               </div>
             </div>
           )}
@@ -152,12 +161,13 @@ export const PlayerCardVisual = ({
     });
   };
 
-  // EV text sizes — primary GW gets the strongest visual weight, subsequent
-  // GWs taper down. The WebkitTextSizeAdjust fix prevents iOS inflation.
+  // EV text sizes — rendered at true visual size (counter-scale applied to
+  // parent div), so these map 1:1 to screen pixels. Primary GW is most
+  // prominent; subsequent GWs taper for hierarchy.
   const evStyles = [
-    "text-emerald-400 text-[10px] font-extrabold",
-    "text-emerald-500 text-[8px] font-bold",
-    "text-emerald-600 text-[6px] font-semibold",
+    "text-emerald-400 text-[11px] font-extrabold",
+    "text-emerald-500 text-[9px] font-bold",
+    "text-emerald-600 text-[7px] font-semibold",
   ];
 
   const isTransferIn = Boolean(player.replacedPlayer || onSolverUndo);
@@ -173,7 +183,7 @@ export const PlayerCardVisual = ({
       className="relative flex flex-col items-center cursor-grab"
       style={{ width: CARD_W }}
     >
-      {/* ── PHOTO CARD ── fixed size, photo is % of this div specifically */}
+      {/* ── PHOTO CARD ��─ fixed size, photo is % of this div specifically */}
       <div
         className={`relative flex-shrink-0 rounded-[10px] transition-transform duration-200 transform-gpu overflow-visible
           ${isTransferIn
@@ -184,21 +194,27 @@ export const PlayerCardVisual = ({
         style={{ width: CARD_W, height: CARD_H }}
       >
         {/*
-          C / V / Reset stack.
-          Key fixes for mobile responsiveness:
-          1. Use <div role="button"> instead of <button> — buttons have browser-enforced
-             minimum touch targets that cause the "huge badges" issue on iOS/mobile.
-          2. Size badges as percentage of card width so they scale proportionally.
-          3. Use touch-action: manipulation to prevent double-tap zoom interference.
-          4. -webkit-text-size-adjust: none (not 100%) fully disables text inflation.
-          5. appearance: none and explicit min-width/min-height: 0 to override defaults.
+          C / V / Reset badge stack.
+
+          The core technique: counter-scale with scale(1/pitchScale) anchored
+          at top-left. This cancels the parent pitch transform so the badges
+          are always BADGE_VISUAL_PX (16px) on screen — large enough to read
+          and tap on mobile, compact enough not to obstruct on desktop.
+
+          Using <div role="button"> instead of <button> bypasses the 44px
+          minimum touch-target that iOS Safari enforces on native buttons,
+          which was the original cause of the oversized badges.
         */}
         <div
-          className="absolute left-[2px] top-[2px] flex flex-col gap-[1px] z-40 pointer-events-auto"
+          className="absolute z-40 pointer-events-auto flex flex-col"
           style={{
+            left: 2,
+            top: 2,
+            gap: Math.max(1, 2 * badgeScale),
+            transformOrigin: "top left",
+            transform: `scale(${badgeScale})`,
             WebkitTextSizeAdjust: "none",
             textSizeAdjust: "none",
-            fontSize: 0, // container has no font size — children set their own
           }}
         >
           {!isBench && handleCapChange && (
@@ -209,13 +225,12 @@ export const PlayerCardVisual = ({
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => { e.stopPropagation(); handleCapChange(player.ID, "C"); }}
                 style={{
-                  width: CARD_W * BADGE_PCT,
-                  height: CARD_W * BADGE_PCT,
-                  minWidth: 0,
-                  minHeight: 0,
+                  width: BADGE_VISUAL_PX,
+                  height: BADGE_VISUAL_PX,
                   touchAction: "manipulation",
+                  fontSize: 8,
                 }}
-                className={`flex items-center justify-center rounded-full text-[5px] font-bold leading-none transition-colors shadow-md transform-gpu cursor-pointer select-none
+                className={`flex items-center justify-center rounded-full font-bold leading-none transition-colors shadow-md cursor-pointer select-none
                   ${isCap
                     ? activeChipType === "tc"
                       ? "bg-purple-500 text-white border border-purple-300"
@@ -231,13 +246,12 @@ export const PlayerCardVisual = ({
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => { e.stopPropagation(); handleCapChange(player.ID, "V"); }}
                 style={{
-                  width: CARD_W * BADGE_PCT,
-                  height: CARD_W * BADGE_PCT,
-                  minWidth: 0,
-                  minHeight: 0,
+                  width: BADGE_VISUAL_PX,
+                  height: BADGE_VISUAL_PX,
                   touchAction: "manipulation",
+                  fontSize: 8,
                 }}
-                className={`flex items-center justify-center rounded-full text-[5px] font-bold leading-none transition-colors shadow-md cursor-pointer select-none
+                className={`flex items-center justify-center rounded-full font-bold leading-none transition-colors shadow-md cursor-pointer select-none
                   ${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
@@ -251,15 +265,13 @@ export const PlayerCardVisual = ({
               onPointerDown={(e) => e.stopPropagation()}
               onClick={(e) => { e.stopPropagation(); onSolverUndo(player); }}
               style={{
-                width: CARD_W * BADGE_PCT,
-                height: CARD_W * BADGE_PCT,
-                minWidth: 0,
-                minHeight: 0,
+                width: BADGE_VISUAL_PX,
+                height: BADGE_VISUAL_PX,
                 touchAction: "manipulation",
               }}
-              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 cursor-pointer select-none"
+              className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transition-colors border border-red-400 shadow-md cursor-pointer select-none"
             >
-              <RotateCcw size={5} strokeWidth={3} />
+              <RotateCcw size={9} strokeWidth={2.5} />
             </div>
           ) : player.replacedPlayer ? (
             <div
@@ -268,24 +280,27 @@ export const PlayerCardVisual = ({
               onPointerDown={(e) => e.stopPropagation()}
               onClick={(e) => onUndo(e, player.ID, player.replacedPlayer)}
               style={{
-                width: CARD_W * BADGE_PCT,
-                height: CARD_W * BADGE_PCT,
-                minWidth: 0,
-                minHeight: 0,
+                width: BADGE_VISUAL_PX,
+                height: BADGE_VISUAL_PX,
                 touchAction: "manipulation",
               }}
-              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 cursor-pointer select-none"
+              className="flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transition-colors border border-red-400 shadow-md cursor-pointer select-none"
             >
-              <RotateCcw size={5} strokeWidth={3} />
+              <RotateCcw size={9} strokeWidth={2.5} />
             </div>
           ) : null}
         </div>
 
-        {/* EV numbers — top-right corner. Primary GW most prominent,
-            subsequent GWs taper down. Anti-inflation styles applied. */}
+        {/* EV numbers — top-right, counter-scaled to remain readable at
+            consistent size across all pitch scales. transform-origin: top right
+            anchors the scale to the top-right corner. */}
         <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)]"
+          className="absolute z-30 pointer-events-none flex flex-col items-end drop-shadow-[0_1px_2px_rgba(0,0,0,0.8)]"
           style={{
+            right: 2,
+            top: 2,
+            transformOrigin: "top right",
+            transform: `scale(${badgeScale})`,
             WebkitTextSizeAdjust: "none",
             textSizeAdjust: "none",
           }}