updates

frontend/src/components/DraggablePlayer.jsx

@@ -44,6 +44,8 @@ export const DraggablePlayer = ({
     WebkitUserSelect: "none",
     userSelect: "none",
     WebkitTouchCallout: "none",
+    touchAction: "none",
+    WebkitUserSelect: "none",
   };
 
   return (
@@ -55,7 +57,7 @@ export const DraggablePlayer = ({
       style={style}
       {...listeners}
       {...attributes}
-      className={`touch-none select-none rounded-xl transition-[box-shadow,filter] duration-200 ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${isHighlighted ? "transfer-highlight-card ring-2 ring-cyan-400/40" : ""}`}
+      className={`touch-none select-none rounded-xl transition-[box-shadow,filter] duration-200 ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${isHighlighted ? "transfer-highlight-card ring-2 ring-cyan-400/40" : ""} [&_*]:touch-none`}
     >
       <PlayerCardVisual
         player={player}

frontend/src/components/PitchView.jsx

@@ -10,11 +10,11 @@ import { DraggablePlayer } from "./DraggablePlayer";
   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 ✓
 */
-const DESIGN_WIDTH = 500;
+const DESIGN_WIDTH = 520;
 const STARTERS_H   = 660;
 const BENCH_H      = 180;
 // Gap between player card wrappers in px (in design space)
-const CARD_GAP     = 40;
+const CARD_GAP     = 24;
 
 export const PitchView = ({
   teamData,

frontend/src/components/PlayerCardVisual.jsx

@@ -5,8 +5,8 @@ import { getPlayerPrice } from "../utils/fplLogic";
 import { PlayerContext } from "../PlayerContext";
 
 // Fixed card dimensions — these are design-space pixels (before PitchView scaling)
-const CARD_W = 88;
-const CARD_H = 80; // photo card height only (label strip is separate, in flow below)
+const CARD_W = 72;
+const CARD_H = 88; // photo card height only (label strip is separate, in flow below)
 
 export const PlayerCardVisual = ({
   player,
@@ -31,19 +31,19 @@ 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-[-9px] top-[-7px] z-40 pointer-events-auto">
+            <div className="absolute left-[1px] top-[1px] flex flex-col gap-[2px] z-40 pointer-events-auto">
               <button
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => onUndo(e, player.ID, player.replacedPlayer)}
-                className="w-5 h-5 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transition-colors border border-red-400 shadow-lg"
+                className="w-[14px] h-[14px] 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={10} strokeWidth={3} />
+                <RotateCcw size={8} strokeWidth={3} />
               </button>
             </div>
           )}
           <Plus className="text-slate-500 group-hover:text-emerald-400 transition-colors mb-1" size={20} />
-          <span className="text-[10px] font-black text-slate-500 group-hover:text-emerald-400 uppercase tracking-widest">
+          <span className="text-[8px] font-black text-slate-500 group-hover:text-emerald-400 uppercase tracking-widest">
             {player.Pos}
           </span>
         </div>
@@ -132,7 +132,7 @@ export const PlayerCardVisual = ({
   const evStyles = [
     "text-emerald-400 text-[14px] font-extrabold",
     "text-emerald-500 text-[11px] font-bold",
-    "text-emerald-600 text-[10px] font-semibold",
+    "text-emerald-600 text-[8px] font-semibold",
   ];
 
   const isTransferIn = Boolean(player.replacedPlayer || onSolverUndo);
@@ -159,13 +159,13 @@ 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-[-9px] top-[-7px] flex flex-col gap-[2px] z-40 pointer-events-auto">
+        <div className="absolute left-[1px] top-[1px] flex flex-col gap-[2px] z-40 pointer-events-auto">
           {!isBench && handleCapChange && (
             <>
               <button
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => { e.stopPropagation(); handleCapChange(player.ID, "C"); }}
-                className={`w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold transition-colors shadow-md transform-gpu
+                className={`w-[14px] h-[14px] flex items-center justify-center rounded-full text-[8px] font-bold transition-colors shadow-md transform-gpu
                   ${isCap
                     ? activeChipType === "tc"
                       ? "bg-purple-500 text-white border border-purple-300 text-[7px]"
@@ -178,7 +178,7 @@ export const PlayerCardVisual = ({
               <button
                 onPointerDown={(e) => e.stopPropagation()}
                 onClick={(e) => { e.stopPropagation(); handleCapChange(player.ID, "V"); }}
-                className={`w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold transition-colors shadow-md
+                className={`w-[14px] h-[14px] flex items-center justify-center rounded-full text-[8px] font-bold 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,17 +189,17 @@ export const PlayerCardVisual = ({
             <button
               onPointerDown={(e) => e.stopPropagation()}
               onClick={(e) => { e.stopPropagation(); onSolverUndo(player); }}
-              className="w-5 h-5 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400"
+              className="w-[14px] h-[14px] flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400"
             >
-              <RotateCcw size={10} strokeWidth={3} />
+              <RotateCcw size={8} strokeWidth={3} />
             </button>
           ) : player.replacedPlayer ? (
             <button
               onPointerDown={(e) => e.stopPropagation()}
               onClick={(e) => onUndo(e, player.ID, player.replacedPlayer)}
-              className="w-5 h-5 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400"
+              className="w-[14px] h-[14px] flex items-center justify-center rounded-full bg-red-600 hover:bg-red-500 text-white transform-gpu transition-colors border border-red-400"
             >
-              <RotateCcw size={10} strokeWidth={3} />
+              <RotateCcw size={8} strokeWidth={3} />
             </button>
           ) : null}
         </div>
@@ -240,17 +240,17 @@ export const PlayerCardVisual = ({
         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
       >
-        <div className={`w-full text-center py-[2px] truncate px-1 font-bold text-[10px] rounded-t shadow-md
+        <div className={`w-full text-center py-[2px] truncate px-1 font-bold text-[8px] 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-[10px] font-black flex items-baseline gap-[2px] ${isBlankThisGw ? "text-slate-400" : "text-slate-800"}`}>
+          <span className={`text-[8px] font-black flex items-baseline gap-[2px] ${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>
-          <span className="text-slate-400 font-light text-[10px]">|</span>
-          <span className="text-[10px] font-black text-emerald-700">
+          <span className="text-slate-400 font-light text-[8px]">|</span>
+          <span className="text-[8px] font-black text-emerald-700">
             £{getPlayerPrice(player).toFixed(1)}
           </span>
         </div>