WEBDIENSTE/openswarm
1
0
Fork 0
mirror of https://github.com/openswarm-ai/openswarm.git synced 2026-08-26 14:32:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

[eric] onboarding: expanded beats cap to a centered card (no beige-void layout on ultra-wide displays)

Browse Source
This commit is contained in:
ciregenz
2026-07-15 16:33:31 -07:00
parent c836bd2731
commit 324ff76ca5
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx
+5 -4
View File
@@ -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,
}}
>
frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx
+2 -1
View File
@@ -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,
}}