team ratings tab fix

frontend/src/components/PitchView.jsx

@@ -20,7 +20,7 @@ export const PitchView = ({
   chipsByGw,
 }) => {
   return (
-    <div className="w-full bg-[#0a3a2a] rounded-2xl border-4 border-[#072a1e] min-h-[650px] xl:min-h-[850px] relative overflow-hidden flex flex-col shadow-[0_0_50px_rgba(0,0,0,0.5)]">
+    <div className="w-full bg-[#0a3a2a] rounded-2xl border-4 border-[#072a1e] min-h-[540px] sm:min-h-[700px] xl:min-h-[850px] relative overflow-hidden flex flex-col shadow-[0_0_50px_rgba(0,0,0,0.5)]">
       {/* PITCH LINES */}
       <div className="absolute inset-0 pointer-events-none opacity-30 flex flex-col items-center">
         <div className="w-full h-1/2 border-b-2 border-white/40 absolute top-0"></div>
@@ -34,7 +34,7 @@ export const PitchView = ({
 
       {/* STARTERS */}
       <div className="flex-1 w-full overflow-x-auto custom-scrollbar">
-        <div className="flex flex-col justify-evenly gap-y-10 z-10 pt-8 pb-12 px-4 min-w-max sm:min-w-0 min-h-full h-full mx-auto">
+        <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;

frontend/src/components/PlayerCardVisual.jsx

@@ -22,7 +22,7 @@ export const PlayerCardVisual = ({
     return (
       <div
         onClick={onPlayerClick}
-        className="relative w-[64px] sm:w-[76px] md:w-[88px] h-[90px] sm:h-[105px] md:h-[120px] 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"
+        className="relative w-[64px] sm:w-[76px] md:w-[88px] h-[85px] sm:h-[105px] md:h-[120px] 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 transform scale-[0.82] sm:scale-100 origin-bottom"
       >
         {player.replacedPlayer && (
           <div className="absolute left-[-14px] top-[-10px] flex flex-col gap-1 z-40 pointer-events-auto">
@@ -147,7 +147,7 @@ export const PlayerCardVisual = ({
   return (
     <div
       onClick={onPlayerClick}
-      className="relative w-[64px] sm:w-[76px] md:w-[88px] h-[90px] sm:h-[105px] md:h-[120px] flex flex-col items-center transform-gpu justify-end cursor-grab active:cursor-grabbing"
+      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 cursor-grab active:cursor-grabbing transform scale-[0.82] sm:scale-100 origin-bottom"
     >
       <div className="absolute left-[-14px] top-[-10px] flex flex-col gap-1 z-40 pointer-events-auto">
         {!isBench && handleCapChange && (

frontend/src/components/TeamRatings.jsx

@@ -1,5 +1,14 @@
 import React, { useState, useEffect } from 'react';
 
+const TEAM_LOGOS = {
+  "Arsenal": 57, "Manchester City": 65, "Liverpool": 64, "Chelsea": 61,
+  "Newcastle United": 67, "Aston Villa": 58, "Manchester United": 66,
+  "Brentford": 402, "Brighton and Hove Albion": 397, "AFC Bournemouth": 1044,
+  "Tottenham Hotspur": 73, "Crystal Palace": 354, "Fulham": 63,
+  "Nottingham Forest": 351, "Everton": 62, "Leeds United": 341,
+  "West Ham United": 563, "Wolverhampton Wanderers": 76, "Sunderland": 71, "Burnley": 328,
+};
+
 export default function TeamRatings() {
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -73,6 +82,7 @@ export default function TeamRatings() {
           {data.map(team => {
             const leftPct = ((maxDef - team.Defence) / (maxDef - minDef)) * 100;
             const bottomPct = ((team.Attack - minAttack) / (maxAttack - minAttack)) * 100;
+            const logoId = TEAM_LOGOS[team.Team];
 
             return (
               <div 
@@ -80,10 +90,10 @@ export default function TeamRatings() {
                 className="absolute w-10 h-10 -ml-5 -mb-5 group z-10 hover:z-50 transition-transform hover:scale-125 cursor-pointer"
                 style={{ left: `${leftPct}%`, bottom: `${bottomPct}%` }}
               >
-                {team.Logo ? (
-                  <img src={team.Logo} alt={team.Team} className="w-full h-full object-contain drop-shadow-xl" />
+                {logoId ? (
+                  <img src={`/logos/${logoId}.png`} alt={team.Team} className="w-full h-full object-contain md:drop-shadow-xl" />
                 ) : (
-                  <div className="w-4 h-4 m-3 bg-luigi-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,0.8)]" />
+                  <div className="w-4 h-4 m-3 bg-luigi-500 rounded-full md:shadow-[0_0_15px_rgba(16,185,129,0.8)]" />
                 )}
                 
                 <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-2 bg-slate-900 border border-slate-700 text-xs rounded opacity-0 group-hover:opacity-100 pointer-events-none shadow-2xl z-50 transition-opacity">

main.py

@@ -514,47 +514,11 @@ def update_player(req: UpdateRequest):
 
 @app.get("/api/ratings")
 def get_ratings():
-    import base64
-
     if os.path.exists("team_ratings_dual_speed.csv"):
         df = pd.read_csv("team_ratings_dual_speed.csv")
         df.rename(columns=lambda x: x.strip(), inplace=True)
-
-        # Team IDs mapping for the logos
-        team_ids = {
-            "Arsenal": 57,
-            "Manchester City": 65,
-            "Liverpool": 64,
-            "Chelsea": 61,
-            "Newcastle United": 67,
-            "Aston Villa": 58,
-            "Manchester United": 66,
-            "Brentford": 402,
-            "Brighton and Hove Albion": 397,
-            "AFC Bournemouth": 1044,
-            "Tottenham Hotspur": 73,
-            "Crystal Palace": 354,
-            "Fulham": 63,
-            "Nottingham Forest": 351,
-            "Everton": 62,
-            "Leeds United": 341,
-            "West Ham United": 563,
-            "Wolverhampton Wanderers": 76,
-            "Sunderland": 71,
-            "Burnley": 328,
-        }
-
-        def get_logo(t_name):
-            tid = team_ids.get(t_name)
-            logo_path = f"logos/{tid}.png"
-            if tid and os.path.exists(logo_path):
-                with open(logo_path, "rb") as f:
-                    return (
-                        "data:image/png;base64," + base64.b64encode(f.read()).decode()
-                    )
-            return None
-
-        df["Logo"] = df["Team"].apply(get_logo)
+        # Strip trailing spaces just in case!
+        df["Team"] = df["Team"].str.strip()
         return df.to_dict(orient="records")
     return []