From 89440355bf494e54072d2d1a1f228c33ec43d52d Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Tue, 21 Oct 2025 12:01:58 -0500 Subject: [PATCH] fix(mobile): reduce height of Your Journey section on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- apps/web/src/components/LevelSliderDisplay.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/LevelSliderDisplay.tsx b/apps/web/src/components/LevelSliderDisplay.tsx index 773d84ae..534d313b 100644 --- a/apps/web/src/components/LevelSliderDisplay.tsx +++ b/apps/web/src/components/LevelSliderDisplay.tsx @@ -412,8 +412,9 @@ export function LevelSliderDisplay({ ? 'violet.500' : 'amber.500', rounded: 'xl', - p: { base: '6', md: '8' }, + p: { base: '4', md: '8' }, height: { base: 'auto', md: '700px' }, + maxHeight: { base: '500px', md: 'none' }, display: 'flex', flexDirection: 'column', })}