updates

frontend/src/components/PitchView.jsx

@@ -33,45 +33,66 @@ export const PitchView = ({
       </div>
 
       {/* STARTERS */}
-      <div className="flex-1 w-full overflow-x-auto custom-scrollbar">
-        <div className="flex flex-col justify-evenly gap-y-4 sm:gap-y-10 z-10 pt-6 sm:pt-8 pb-10 sm:pb-12 px-2 sm:px-4 min-w-max sm:min-w-0 min-h-full h-full mx-auto">
-          {["G", "D", "M", "F"].map((pos) => {
-            const rowPlayers = teamData.slice(0, 11).filter((p) => p.Pos === pos);
-            if (rowPlayers.length === 0) return null;
-            return (
-              <div key={pos} className="flex justify-center gap-[26px] sm:gap-8 md:gap-12 xl:gap-16 w-full px-2">
-                {rowPlayers.map((p) => (
-                  <DraggablePlayer
-                    key={p.ID}
-                    player={p}
-                    isBench={false}
-                    isActiveDrag={activeDragPlayer !== null}
-                    isValidTarget={isValidSwap(activeDragPlayer, p)}
-                    captainId={captainId}
-                    viceId={viceId}
-                    handleCapChange={handleCapChange}
-                    playerCardGWs={playerCardGWs}
-                    fixtures={fixtures}
-                    activeGW={activeGW}
-                    onPlayerClick={(player) => setSelectedPlayer(player)}
-                    onUndo={handleUndoTransfer}
-                    isHighlighted={Array.from(highlightTransferIds[activeGW] || []).includes(p.ID)}
-                    onSolverUndo={(solverTransferPairs[activeGW] || {})[p.ID] ? () => resetHighlightedTransfer(p) : undefined}
-                    activeChipType={chipsByGw[activeGW]}
-                  />
-                ))}
-              </div>
-            );
-          })}
+      {/*
+        Mobile scaling strategy:
+        - We wrap the entire starters grid in a scaler div that uses CSS transform: scale()
+          This lets every card, label, EV number, and gap shrink proportionally as one unit —
+          no individual element needs touching. The outer div reserves the correct height via
+          a paddingBottom trick so the layout below (bench) isn't eaten by the scaled content.
+        - On xs phones (~390px) we scale to ~0.72. On slightly larger phones (430px) ~0.80.
+          sm (640px+) gets scale-100, desktop is untouched.
+        - overflow-hidden on the parent already clips any tiny bleed.
+      */}
+      <div className="flex-1 w-full relative">
+        {/* scale-wrapper: origin top-center so rows stay centred; scale via CSS var */}
+        <div
+          className="absolute inset-0 flex flex-col justify-evenly gap-y-4 sm:gap-y-10 z-10 pt-6 sm:pt-8 pb-10 sm:pb-12 px-2 sm:px-4"
+          style={{
+            // CSS custom property lets us animate or override easily
+            transformOrigin: "top center",
+          }}
+        >
+          {/* Inner wrapper that actually scales on small screens */}
+          <div className="w-full h-full flex flex-col justify-evenly [transform:scale(0.72)] xs:[transform:scale(0.80)] sm:[transform:scale(1)] origin-top">
+            {["G", "D", "M", "F"].map((pos) => {
+              const rowPlayers = teamData.slice(0, 11).filter((p) => p.Pos === pos);
+              if (rowPlayers.length === 0) return null;
+              return (
+                <div key={pos} className="flex justify-center gap-8 sm:gap-8 md:gap-12 xl:gap-16 w-full px-2">
+                  {rowPlayers.map((p) => (
+                    <DraggablePlayer
+                      key={p.ID}
+                      player={p}
+                      isBench={false}
+                      isActiveDrag={activeDragPlayer !== null}
+                      isValidTarget={isValidSwap(activeDragPlayer, p)}
+                      captainId={captainId}
+                      viceId={viceId}
+                      handleCapChange={handleCapChange}
+                      playerCardGWs={playerCardGWs}
+                      fixtures={fixtures}
+                      activeGW={activeGW}
+                      onPlayerClick={(player) => setSelectedPlayer(player)}
+                      onUndo={handleUndoTransfer}
+                      isHighlighted={Array.from(highlightTransferIds[activeGW] || []).includes(p.ID)}
+                      onSolverUndo={(solverTransferPairs[activeGW] || {})[p.ID] ? () => resetHighlightedTransfer(p) : undefined}
+                      activeChipType={chipsByGw[activeGW]}
+                    />
+                  ))}
+                </div>
+              );
+            })}
+          </div>
         </div>
       </div>
 
       {/* BENCH */}
-        <div
-          className={`mt-auto w-full border-t-2 z-10 transition-colors duration-300 overflow-x-auto custom-scrollbar ${chipsByGw[activeGW] === "bb" ? "bg-emerald-950/60 border-emerald-500/50 shadow-[0_0_24px_rgba(16,185,129,0.2)]" : "bg-slate-950/90 border-slate-800"
-            }`}
-        >
-          <div className="min-h-[140px] sm:min-h-[160px] md:min-h-[180px] min-w-max sm:min-w-0 mx-auto flex justify-center items-center gap-[26px] sm:gap-8 md:gap-12 xl:gap-16 pb-10 pt-6 px-4">
+      <div
+        className={`mt-auto w-full border-t-2 z-10 transition-colors duration-300 ${chipsByGw[activeGW] === "bb" ? "bg-emerald-950/60 border-emerald-500/50 shadow-[0_0_24px_rgba(16,185,129,0.2)]" : "bg-slate-950/90 border-slate-800"}`}
+      >
+        {/* Same scale treatment for bench row */}
+        <div className="min-h-[120px] sm:min-h-[160px] md:min-h-[180px] mx-auto flex justify-center items-center pb-10 pt-6 px-4 overflow-hidden">
+          <div className="flex justify-center items-center gap-8 sm:gap-8 md:gap-12 xl:gap-16 [transform:scale(0.72)] xs:[transform:scale(0.80)] sm:[transform:scale(1)] origin-center">
             {teamData.slice(11, 15).map((p, benchIndex) => (
               <DraggablePlayer
                 key={p.ID}
@@ -95,6 +116,7 @@ export const PitchView = ({
             ))}
           </div>
         </div>
+      </div>
     </div>
   );
 };

frontend/src/components/PlayerCardVisual.jsx

@@ -148,7 +148,7 @@ export const PlayerCardVisual = ({
       // 1. Removed outer borders entirely to kill the "double bar" glitch.
       // 2. Lifted them slightly higher (-translate-y-3).
       // 3. Added a heavy, static cast shadow on the grass below them so the brain instantly registers the 3D levitation!
-      className={`relative w-[64px] sm:w-[76px] md:w-[88px] h-[85px] sm:h-[105px] md:h-[120px] flex flex-col items-center justify-end rounded-[10px] cursor-grab transition-transform duration-200 transform-gpu origin-bottom
+      className={`relative w-[64px] sm:w-[76px] md:w-[88px] h-[85px] sm:h-[105px] md:h-[120px] flex flex-col items-center justify-end rounded-[10px] cursor-grab transition-transform duration-200 transform-gpu origin-bottom overflow-visible
         ${isTransferIn 
           ? "bg-gradient-to-t from-cyan-900/60 via-cyan-900/5 to-transparent -translate-y-3 shadow-[0_25px_20px_-10px_rgba(0,0,0,0.8)] z-30" 
           : "bg-transparent border border-transparent hover:border-slate-700/50 z-10"
@@ -229,6 +229,13 @@ export const PlayerCardVisual = ({
         />
       )}
 
+      {/*
+        Label strip: sits below the card image. Uses bottom-[-24px] to float under the photo.
+        w-[135%] gives it breathing room for the name. overflow-visible on the card wrapper
+        (set above) means this never gets clipped by the card bounds — it was already working
+        fine on desktop; we just need to make sure the parent chain doesn't add overflow:hidden.
+        The scale() wrapper in PitchView shrinks everything uniformly so these offsets scale too.
+      */}
       <div
         draggable="false"
         className={`absolute bottom-[-24px] sm:bottom-[-28px] w-[135%] flex flex-col items-center z-30 pointer-events-none ${isBench ? "opacity-80" : "opacity-100"}`}
@@ -237,20 +244,20 @@ export const PlayerCardVisual = ({
           {player.Name}
         </div>
         
-        <div className="w-full bg-slate-200 border-x border-slate-700 flex justify-center items-center gap-1.5 sm:gap-2 py-[2.5px] shadow-inner">
-          <span className={`text-[10px] sm:text-xs font-black flex items-baseline gap-0.5 ${isBlankThisGw ? 'text-slate-400' : 'text-slate-800'}`}>
+        <div className="w-full bg-slate-200 border-x border-slate-700 flex justify-center items-center gap-1 sm:gap-2 py-[2.5px] shadow-inner">
+          <span className={`text-[9px] sm:text-xs font-black flex items-baseline gap-0.5 ${isBlankThisGw ? 'text-slate-400' : 'text-slate-800'}`}>
             {isBlankThisGw ? "-" : (player[`${activeGW}_xMins`] ?? 90)}{" "}
-            <span className="text-[7px] sm:text-[8px] font-bold text-slate-500 uppercase tracking-tight">
-              xMins
+            <span className="text-[6px] sm:text-[8px] font-bold text-slate-500 uppercase tracking-tight">
+              xM
             </span>
           </span>
-          <span className="text-slate-400 font-light text-[10px]">|</span>
-          <span className="text-[10px] sm:text-xs font-black text-emerald-700">
+          <span className="text-slate-400 font-light text-[9px] sm:text-[10px]">|</span>
+          <span className="text-[9px] sm:text-xs font-black text-emerald-700">
             £{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 h-[21px] px-0.5 overflow-hidden"
+          className="w-full bg-slate-900 border-x border-b border-slate-700 flex items-center rounded-b shadow-md h-[18px] sm:h-[21px] px-0.5 overflow-hidden"
         >
           <div className="flex items-center justify-center w-full whitespace-nowrap overflow-hidden text-ellipsis">
             {renderFixtures(player.Team, activeGW)}