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

fix(practice): only show landscape keypad on phone-sized screens 

Use max-height: 500px constraint to only switch to the two-column
landscape layout on small screens (phones). On tablets and larger
screens in landscape, keep the horizontal bar at the bottom.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-12-11 09:22:28 -06:00
parent 31fbf80b8f
commit 6c09976d4b
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/practice/NumericKeypad.tsx
View File

@ -32,7 +32,8 @@ function getPortraitStyles(isDark: boolean): string {
.keypad-landscape-container {
display: none;
}
@media (orientation: landscape) {
/* Only show landscape keypad on small screens (phones) */
@media (orientation: landscape) and (max-height: 500px) {
.keypad-portrait-container {
display: none;
}
@ -40,6 +41,15 @@ function getPortraitStyles(isDark: boolean): string {
display: block;
}
}
/* On larger landscape screens, keep portrait bar at bottom */
@media (orientation: landscape) and (min-height: 501px) {
.keypad-portrait-container {
display: block;
}
.keypad-landscape-container {
display: none;
}
}
.keypad-portrait {
width: 100%;
}