antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: apply CSS scaling to abacus components in memory quiz

Browse Source 
Add same scaling wrapper (transform: scale(2.2)) to TypstSoroban
components in CardGrid and ResultsCardGrid to make abacus content
visible by cropping SVG whitespace. Fixes abacus visibility issues
in memory quiz memorize phase.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-09-15 19:55:03 -05:00
parent bb3d4636cd
commit 599fbfb802
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/web/src/app/games/memory-quiz/page.tsx
View File

@@ -668,11 +668,16 @@ function CardGrid({ state }: { state: SorobanQuizState }) {
justifyContent: 'center',
overflow: 'hidden'
})}>
<TypstSoroban
number={card.number}
width="120pt"
height="160pt"
/>
<div className={css({
transform: 'scale(2.2)',
transformOrigin: 'center'
})}>
<TypstSoroban
number={card.number}
width="120pt"
height="160pt"
/>
</div>
</div>
</div>
</div>
@@ -838,11 +843,16 @@ function ResultsCardGrid({ state }: { state: SorobanQuizState }) {
justifyContent: 'center',
overflow: 'hidden'
})}>
<TypstSoroban
number={card.number}
width="120pt"
height="160pt"
/>
<div className={css({
transform: 'scale(2.2)',
transformOrigin: 'center'
})}>
<TypstSoroban
number={card.number}
width="120pt"
height="160pt"
/>
</div>
</div>
{/* Right/Wrong indicator overlay */}