From c80477d24877ddada5f3f4405abbf05e1d753b5d Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 08:43:17 -0500
Subject: [PATCH] fix(levels): only animate abacus, not container with
 background/border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix React Spring animation to only affect the abacus itself, not the
container with background and border. Also keep container height fixed.

Changes:
- Move animation from container div to inner wrapper around AbacusReact
- Add minHeight to container to prevent height changes
- Add alignItems: 'center' to vertically center the abacus
- Container background/border now stays fixed while abacus animates

This provides a cleaner, more polished animation where only the abacus
scales smoothly while the container remains stable.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/levels/page.tsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/levels/page.tsx b/apps/web/src/app/levels/page.tsx
index ecc7482d..c2c55d77 100644
--- a/apps/web/src/app/levels/page.tsx
+++ b/apps/web/src/app/levels/page.tsx
@@ -288,10 +288,11 @@ export default function LevelsPage() {
               </div>
 
               {/* Abacus Display */}
-              <animated.div
+              <div
                 className={css({
                   display: 'flex',
                   justifyContent: 'center',
+                  alignItems: 'center',
                   mb: '6',
                   p: '6',
                   bg: 'rgba(0, 0, 0, 0.3)',
@@ -299,19 +300,23 @@ export default function LevelsPage() {
                   border: '1px solid',
                   borderColor: 'gray.700',
                   overflowX: 'auto',
+                  minHeight: '400px',
                 })}
-                style={{
-                  transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
-                }}
               >
-                <AbacusReact
-                  value={displayValue}
-                  columns={currentLevel.digits}
-                  scaleFactor={scaleFactor}
-                  showNumbers={true}
-                  customStyles={darkStyles}
-                />
-              </animated.div>
+                <animated.div
+                  style={{
+                    transform: animatedProps.scaleFactor.to((s) => `scale(${s / scaleFactor})`),
+                  }}
+                >
+                  <AbacusReact
+                    value={displayValue}
+                    columns={currentLevel.digits}
+                    scaleFactor={scaleFactor}
+                    showNumbers={true}
+                    customStyles={darkStyles}
+                  />
+                </animated.div>
+              </div>
 
               {/* Digit Count */}
               <div className={css({ textAlign: 'center', color: 'gray.400', fontSize: 'sm' })}>