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

fix(guide): remove inner containers and tighten margins 

- Remove white/gray bordered inner containers around abacuses
- Center abacuses directly in cards using flex
- Reduce card padding from p:4 to p:2
- Tighten margins between elements (mb:3→mb:2)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-04 19:40:19 -06:00
parent 8a170833f3
commit 7e54c6f4fc
1 changed files with 32 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
apps/web/src/app/guide/components/ReadingNumbersGuide.tsx
View File

@ -245,7 +245,7 @@ export function ReadingNumbersGuide() {
border: '1px solid',
borderColor: 'gray.200',
rounded: 'lg',
p: '4',
p: '2',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
@ -257,42 +257,32 @@ export function ReadingNumbersGuide() {
fontSize: 'xl',
fontWeight: 'bold',
color: 'brand.600',
mb: '3',
mb: '2',
})}
>
{example.num}
</div>
{/* Fixed size container for consistent abacus rendering */}
<div
className={css({
width: '200px',
height: '400px',
bg: 'white',
border: '1px solid',
borderColor: 'gray.300',
rounded: 'md',
mb: '3',
flex: '1',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
mx: 'auto',
my: '2',
})}
>
<div className={css({ width: '100%', height: '100%' })}>
<AbacusReact
value={example.num}
columns={1}
beadShape={appConfig.beadShape}
colorScheme={appConfig.colorScheme}
hideInactiveBeads={appConfig.hideInactiveBeads}
scaleFactor={1.2}
interactive={false}
showNumbers={false}
animated={true}
/>
</div>
<AbacusReact
value={example.num}
columns={1}
beadShape={appConfig.beadShape}
colorScheme={appConfig.colorScheme}
hideInactiveBeads={appConfig.hideInactiveBeads}
scaleFactor={1.2}
interactive={false}
showNumbers={false}
animated={true}
/>
</div>
<p
@ -301,7 +291,7 @@ export function ReadingNumbersGuide() {
color: 'gray.600',
lineHeight: 'tight',
textAlign: 'center',
mt: 'auto',
mt: '2',
})}
>
{t(`singleDigits.examples.${example.descKey}`)}
@ -471,7 +461,7 @@ export function ReadingNumbersGuide() {
border: '1px solid',
borderColor: 'blue.300',
rounded: 'lg',
p: '4',
p: '2',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
@ -483,42 +473,32 @@ export function ReadingNumbersGuide() {
fontSize: '2xl',
fontWeight: 'bold',
color: 'blue.600',
mb: '3',
mb: '2',
})}
>
{example.num}
</div>
{/* Fixed size container for multi-digit numbers */}
<div
className={css({
width: '320px',
height: '350px',
bg: 'gray.50',
border: '1px solid',
borderColor: 'blue.200',
rounded: 'md',
mb: '3',
flex: '1',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
mx: 'auto',
my: '2',
})}
>
<div className={css({ width: '100%', height: '100%' })}>
<AbacusReact
value={example.num}
columns={'auto'}
beadShape={appConfig.beadShape}
colorScheme={appConfig.colorScheme}
hideInactiveBeads={appConfig.hideInactiveBeads}
scaleFactor={1.2}
interactive={false}
showNumbers={false}
animated={true}
/>
</div>
<AbacusReact
value={example.num}
columns={'auto'}
beadShape={appConfig.beadShape}
colorScheme={appConfig.colorScheme}
hideInactiveBeads={appConfig.hideInactiveBeads}
scaleFactor={1.2}
interactive={false}
showNumbers={false}
animated={true}
/>
</div>
<p
@ -527,6 +507,7 @@ export function ReadingNumbersGuide() {
color: 'blue.700',
lineHeight: 'relaxed',
textAlign: 'center',
mt: '2',
})}
>
{t(`multiDigit.examples.${example.descKey}`)}