From fc5cf1216fe03edfb7e44afda01192f4b97b4f4e Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 23 Oct 2025 21:35:47 -0500
Subject: [PATCH] fix(card-sorting): adjust game board for spectator panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The game board now resizes to avoid being covered by spectator panels:

Spectator Banner (56px height at top):
- Game board height reduced to calc(100vh - 56px)
- Game board top position adjusted to 56px
- Timer hidden for spectators (since banner shows time)

Spectator Stats Sidebar (280px width on right):
- Game board width reduced to calc(100vw - 280px) when sidebar is open
- Width transitions smoothly when sidebar collapses/expands

Player view:
- Full viewport (100vw × 100vh) as before
- Timer visible in top-left corner

All transitions are smooth with 0.3s ease for a polished feel when
toggling the stats sidebar.

This ensures spectators can see the entire game board without any
panels covering cards or gameplay elements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/PlayingPhaseDrag.tsx           | 49 ++++++++++---------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx b/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
index 3d822628..3b537983 100644
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhaseDrag.tsx
@@ -1782,37 +1782,40 @@ export function PlayingPhaseDrag() {
         </div>
       )}
 
-      {/* Timer (minimal, top-left) */}
-      <div
-        className={css({
-          position: 'absolute',
-          top: '16px',
-          left: '16px',
-          padding: '8px 16px',
-          background: 'rgba(255, 255, 255, 0.9)',
-          border: '2px solid rgba(59, 130, 246, 0.3)',
-          borderRadius: '20px',
-          fontSize: '16px',
-          fontWeight: '600',
-          color: '#0c4a6e',
-          zIndex: 10,
-          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-        })}
-      >
-        ⏱️ {formatTime(elapsedTime)}
-      </div>
+      {/* Timer (minimal, top-left) - hidden for spectators since banner shows time */}
+      {!isSpectating && (
+        <div
+          className={css({
+            position: 'absolute',
+            top: '16px',
+            left: '16px',
+            padding: '8px 16px',
+            background: 'rgba(255, 255, 255, 0.9)',
+            border: '2px solid rgba(59, 130, 246, 0.3)',
+            borderRadius: '20px',
+            fontSize: '16px',
+            fontWeight: '600',
+            color: '#0c4a6e',
+            zIndex: 10,
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+          })}
+        >
+          ⏱️ {formatTime(elapsedTime)}
+        </div>
+      )}
 
-      {/* Play area with freely positioned cards - full viewport */}
+      {/* Play area with freely positioned cards - adjust for spectator panels */}
       <div
         ref={containerRef}
         className={css({
-          width: '100vw',
-          height: '100vh',
+          width: isSpectating && !spectatorStatsCollapsed ? 'calc(100vw - 280px)' : '100vw',
+          height: isSpectating ? 'calc(100vh - 56px)' : '100vh',
           position: 'absolute',
-          top: 0,
+          top: isSpectating ? '56px' : 0,
           left: 0,
           background: 'linear-gradient(135deg, #f0f9ff, #e0f2fe)',
           overflow: 'hidden',
+          transition: 'width 0.3s ease, height 0.3s ease, top 0.3s ease',
         })}
       >
         {/* Render continuous curved path through the entire sequence */}