From fea7826bd85a7ec29fe0dd58dad589b80326ea2f Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 15 Sep 2025 20:04:46 -0500
Subject: [PATCH] fix: ensure abacus visibility in memory quiz display phase
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace pre-generated large TypstSoroban components with fresh
instances using proper dimensions (240pt x 320pt) and scaling
(1.5x) in DisplayPhase. This fixes abacus visibility during
the memorize phase by avoiding oversized transparent SVGs.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/games/memory-quiz/page.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/games/memory-quiz/page.tsx b/apps/web/src/app/games/memory-quiz/page.tsx
index 24d78224..c8d31a36 100644
--- a/apps/web/src/app/games/memory-quiz/page.tsx
+++ b/apps/web/src/app/games/memory-quiz/page.tsx
@@ -500,15 +500,19 @@ function DisplayPhase({ state, dispatch }: { state: SorobanQuizState; dispatch:
           justifyContent: 'center',
           margin: '0 auto',
           transition: 'transform 0.3s ease',
-          '& svg': {
-            width: '100%',
-            height: '100%',
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain'
-          }
+          overflow: 'hidden'
         })}>
-          {currentCard.svgComponent}
+          <div className={css({
+            transform: 'scale(1.5)',
+            transformOrigin: 'center'
+          })}>
+            <TypstSoroban
+              number={currentCard.number}
+              width="240pt"
+              height="320pt"
+              transparent={true}
+            />
+          </div>
         </div>
       )}
     </div>