fix(mobile): reduce height of Your Journey section on mobile

Added maxHeight constraint and reduced padding to ensure the abacus
stays visible while scrubbing the slider on mobile devices.

Changes:
- Added maxHeight: 500px on mobile (base), none on desktop (md)
- Reduced padding from 6 to 4 on mobile (base)

This ensures users can see both the slider and abacus simultaneously
on iPhone displays without scrolling.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-10-21 12:01:58 -05:00
parent 632e840ca7
commit 89440355bf

View File

@@ -412,8 +412,9 @@ export function LevelSliderDisplay({
? 'violet.500' ? 'violet.500'
: 'amber.500', : 'amber.500',
rounded: 'xl', rounded: 'xl',
p: { base: '6', md: '8' }, p: { base: '4', md: '8' },
height: { base: 'auto', md: '700px' }, height: { base: 'auto', md: '700px' },
maxHeight: { base: '500px', md: 'none' },
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
})} })}