From 560c974bf33fafd14bd0f86e960c78f2054714ef Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Wed, 14 Jan 2026 16:34:59 -0700
Subject: [PATCH] Try fix mobile

---
 components/Scoreboard.tsx | 39 +++++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/components/Scoreboard.tsx b/components/Scoreboard.tsx
index 86fb60a..6743bdc 100644
--- a/components/Scoreboard.tsx
+++ b/components/Scoreboard.tsx
@@ -93,14 +93,21 @@ const PlayerRow: React.FC<PlayerRowProps> = ({ player, index, maxScore }) => {
       initial={{ opacity: 0, x: -20 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ delay: baseDelay, duration: 0.4 }}
-      className="flex items-center gap-4 py-3"
+      className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 py-3"
     >
-      <div className="flex items-center gap-3 w-48 shrink-0">
-        <PlayerAvatar seed={player.avatarSeed} size={32} />
-        <span className="font-black text-lg font-display truncate">{player.displayName}</span>
+      <div className="flex items-center justify-between md:justify-start gap-3 w-full md:w-48 md:shrink-0">
+        <div className="flex items-center gap-3 min-w-0">
+          <PlayerAvatar seed={player.avatarSeed} size={32} />
+          <span className="font-black text-lg font-display truncate">{player.displayName}</span>
+        </div>
+        <div className="md:hidden">
+          <span className="font-black text-2xl font-display">
+            <AnimatedNumber value={getDisplayScore()} />
+          </span>
+        </div>
       </div>
 
-      <div className="flex-1 flex items-center gap-4">
+      <div className="w-full md:flex-1 flex items-center gap-4">
         <div className="flex-1 h-12 bg-gray-100 rounded-full overflow-hidden relative">
           <motion.div
             className="h-full rounded-full"
@@ -111,14 +118,14 @@ const PlayerRow: React.FC<PlayerRowProps> = ({ player, index, maxScore }) => {
           />
         </div>
 
-        <div className="w-20 text-right">
+        <div className="hidden md:block w-20 text-right">
           <span className="font-black text-2xl font-display">
             <AnimatedNumber value={getDisplayScore()} />
           </span>
         </div>
       </div>
 
-      <div className="flex items-center gap-2 min-w-[280px] justify-start">
+      <div className="flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto md:min-w-[280px] justify-start">
         <AnimatePresence>
           {breakdown === null && (
             <motion.span
@@ -197,12 +204,12 @@ export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost,
   const maxScore = Math.max(...sortedPlayers.map(p => p.score), 1);
 
   return (
-    <div className="flex flex-col h-screen p-8">
-      <header className="text-center mb-8">
-        <h1 className="text-5xl font-black text-white font-display drop-shadow-md">Scoreboard</h1>
+    <div className="flex flex-col h-screen p-4 md:p-8">
+      <header className="text-center mb-4 md:mb-8">
+        <h1 className="text-3xl md:text-5xl font-black text-white font-display drop-shadow-md">Scoreboard</h1>
       </header>
 
-      <div className="flex-1 bg-white rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.2)] p-8 md:p-12 text-gray-900 max-w-5xl w-full mx-auto relative z-10 border-8 border-white/50 overflow-hidden">
+      <div className="flex-1 bg-white rounded-2xl md:rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.2)] p-4 md:p-12 text-gray-900 max-w-5xl w-full mx-auto relative z-10 border-4 md:border-8 border-white/50 overflow-hidden">
         <div className="space-y-2">
           {sortedPlayers.map((player, index) => (
             <PlayerRow key={player.id} player={player} index={index} maxScore={maxScore} />
@@ -210,18 +217,18 @@ export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost,
         </div>
       </div>
 
-      <div className="mt-8 flex justify-end max-w-5xl w-full mx-auto">
+      <div className="mt-4 md:mt-8 flex justify-center md:justify-end max-w-5xl w-full mx-auto">
         {isHost ? (
           <button
             onClick={onNext}
-            className="bg-white text-theme-primary px-12 py-4 rounded-2xl text-2xl font-black shadow-[0_8px_0_rgba(0,0,0,0.2)] hover:scale-105 active:shadow-none active:translate-y-[8px] transition-all"
+            className="bg-white text-theme-primary px-8 md:px-12 py-3 md:py-4 rounded-xl md:rounded-2xl text-xl md:text-2xl font-black shadow-[0_8px_0_rgba(0,0,0,0.2)] hover:scale-105 active:shadow-none active:translate-y-[8px] transition-all"
           >
             Next
           </button>
         ) : (
-          <div className="flex items-center gap-3 bg-white/10 px-8 py-4 rounded-2xl backdrop-blur-md border-2 border-white/20">
-            <Loader2 className="animate-spin w-8 h-8" />
-            <span className="text-xl font-bold">Waiting for host...</span>
+          <div className="flex items-center gap-2 md:gap-3 bg-white/10 px-4 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl backdrop-blur-md border-2 border-white/20">
+            <Loader2 className="animate-spin w-6 h-6 md:w-8 md:h-8" />
+            <span className="text-base md:text-xl font-bold">Waiting for host...</span>
           </div>
         )}
       </div>