From 7488bb38033b2d3d3fc18b9f09373506d69e25a5 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 30 Sep 2025 16:39:27 -0500
Subject: [PATCH] feat: make SVG span full viewport width for sprint mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove constraints preventing full-width rendering:
- Remove 8px horizontal padding from track container in sprint mode
- Remove maxWidth: 1400px constraint from SVG
- Change justifyContent to 'stretch' for sprint mode
- Remove borderRadius from steam-train-journey container

Now the railroad track SVG truly spans the entire browser viewport
width, with tunnel entrances at the absolute edges.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/app/games/complement-race/components/GameDisplay.tsx  | 4 ++--
 .../components/RaceTrack/SteamTrainJourney.tsx                | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/games/complement-race/components/GameDisplay.tsx b/apps/web/src/app/games/complement-race/components/GameDisplay.tsx
index 39adfea4..ee662897 100644
--- a/apps/web/src/app/games/complement-race/components/GameDisplay.tsx
+++ b/apps/web/src/app/games/complement-race/components/GameDisplay.tsx
@@ -254,9 +254,9 @@ export function GameDisplay() {
         right: '50%',
         marginLeft: '-50vw',
         marginRight: '-50vw',
-        padding: state.style === 'sprint' ? '0 8px' : '0 20px',
+        padding: state.style === 'sprint' ? '0' : '0 20px',
         display: 'flex',
-        justifyContent: 'center',
+        justifyContent: state.style === 'sprint' ? 'stretch' : 'center',
         background: 'transparent',
         flex: state.style === 'sprint' ? 1 : 'initial',
         minHeight: state.style === 'sprint' ? 0 : 'initial'
diff --git a/apps/web/src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx b/apps/web/src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx
index d4a358ee..93c6bead 100644
--- a/apps/web/src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx
+++ b/apps/web/src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx
@@ -125,11 +125,10 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
       width: '100%',
       height: '100%',
       background: 'transparent',
-      borderRadius: '12px',
       overflow: 'visible',
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'stretch'
     }}>
       {/* Route and time of day indicator */}
       <div data-component="route-info" style={{
@@ -199,7 +198,6 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
         viewBox="-50 -50 900 700"
         style={{
           width: '100%',
-          maxWidth: '1400px',
           height: 'auto',
           aspectRatio: '800 / 600',
           overflow: 'visible'