diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx index 961a8091..1bc6bb0c 100644 --- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx +++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx @@ -152,8 +152,9 @@ const OnboardingV3Root: React.FC = () => { const windowed = WINDOWED_BEATS.includes(beat); const vw = window.innerWidth; const vh = window.innerHeight; - const stageW = windowed ? Math.min(900, Math.round(vw * 0.72)) : vw; - const stageH = windowed ? Math.min(560, Math.round(vh * 0.74)) : vh; + // Expanded beats cap at a large centered card (not edge-to-edge) so on very wide displays the stage never balloons into a beige void around the sparse content. + const stageW = windowed ? Math.min(900, Math.round(vw * 0.72)) : Math.min(1680, Math.round(vw * 0.94)); + const stageH = windowed ? Math.min(560, Math.round(vh * 0.74)) : Math.min(1000, Math.round(vh * 0.92)); // AnimatePresence stays mounted so the overlay's exit fade (the curtain lift) actually plays when active flips false. return ( @@ -171,11 +172,11 @@ const OnboardingV3Root: React.FC = () => { > diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx index 5895ad45..84e047f9 100644 --- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx +++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx @@ -44,7 +44,8 @@ const BeatShell: React.FC<{