From 324ff76ca564c6b4ce48166d51de157bf7e7a017 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 15 Jul 2026 16:33:31 -0700
Subject: [PATCH] [eric] onboarding: expanded beats cap to a centered card (no
 beige-void layout on ultra-wide displays)

---
 .../src/app/components/OnboardingV3/OnboardingV3Root.tsx | 9 +++++----
 .../src/app/components/OnboardingV3/beats/BeatShell.tsx  | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

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 = () => {
       >
         <motion.div
           initial={{ opacity: 0, scale: 0.72, filter: 'blur(18px)' }}
-          animate={{ opacity: 1, scale: 1, filter: 'blur(0px)', width: stageW, height: stageH, borderRadius: windowed ? 14 : 0 }}
+          animate={{ opacity: 1, scale: 1, filter: 'blur(0px)', width: stageW, height: stageH, borderRadius: 16 }}
           transition={{ type: 'spring', stiffness: 170, damping: 24, mass: 0.9 }}
           style={{
             position: 'relative', overflow: 'hidden',
-            boxShadow: windowed ? '0 30px 90px rgba(0,0,0,0.5)' : 'none',
+            boxShadow: '0 30px 90px rgba(0,0,0,0.5)',
             background: c.bg.page,
           }}
         >
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<{
     <div style={{ display: 'flex', width: '100%', height: '100%', background: c.bg.secondary }}>
       <div
         style={{
-          position: 'relative', width: 'min(400px, 36%)', flexShrink: 0, display: 'flex', flexDirection: 'column',
+          // vw (not %, which resolves oddly in the flex child) keeps the copy panel ~36% instead of a thin strip on ultra-wide screens, so the stage never balloons into a beige void.
+          position: 'relative', width: 'clamp(360px, 36vw, 600px)', flexShrink: 0, display: 'flex', flexDirection: 'column',
           justifyContent: 'center', padding: '48px 46px 48px 44px', boxSizing: 'border-box',
           background: c.bg.inverse, color: c.text.inverse, clipPath: ZIGZAG_CLIP,
         }}