From 563136fb79fa10b2af3a119bf0f861e3b0812b2e Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Mon, 20 Oct 2025 09:11:59 -0500 Subject: [PATCH] fix(levels): reduce Dan scale and container height to prevent clipping MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Changed minimum scale factor from 1.5 to 1.2 for 30-column Dan abacuses to prevent leftmost/rightmost columns from being clipped. Also reduced container height from 900px to 700px to provide better visual balance without excessive whitespace around the largest Kyu abacus. Scale factor range is now 1.2 to 2.0, creating a 1.67x size difference. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- apps/web/src/app/levels/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/web/src/app/levels/page.tsx b/apps/web/src/app/levels/page.tsx index a3a1ad4e..84db8397 100644 --- a/apps/web/src/app/levels/page.tsx +++ b/apps/web/src/app/levels/page.tsx @@ -127,8 +127,8 @@ export default function LevelsPage() { // Calculate scale factor based on number of columns to fit the page // Use constrained range to prevent huge size differences between levels - // Min 1.5 (for 30-column Dan levels) to Max 2.0 (for 2-column Kyu levels) - const scaleFactor = Math.max(1.5, Math.min(2.0, 20 / currentLevel.digits)) + // Min 1.2 (for 30-column Dan levels) to Max 2.0 (for 2-column Kyu levels) + const scaleFactor = Math.max(1.2, Math.min(2.0, 20 / currentLevel.digits)) // Animate scale factor with React Spring for smooth transitions const animatedProps = useSpring({ @@ -254,7 +254,7 @@ export default function LevelsPage() { : 'amber.500', rounded: 'xl', p: { base: '6', md: '8' }, - height: { base: 'auto', md: '900px' }, + height: { base: 'auto', md: '700px' }, display: 'flex', flexDirection: 'column', })}