fix(practice): remove empty spacer button from keypad layout

When submit button isn't shown, omit it entirely from the layout
instead of using a hidden spacer. This lets the remaining buttons
flex to fill the full width.

🤖 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:07:35 -06:00
parent 4b8cbdf83c
commit 1058f411c6
1 changed files with 4 additions and 13 deletions

View File

@ -76,10 +76,6 @@ function getPortraitStyles(isDark: boolean): string {
background: #16a34a;
color: white;
}
.keypad-portrait .hg-button[data-skbtn="{empty}"] {
visibility: hidden;
pointer-events: none;
}
`
}
@ -141,10 +137,6 @@ function getLandscapeStyles(isDark: boolean): string {
background: #16a34a;
color: white;
}
.keypad-landscape .hg-button[data-skbtn="{empty}"] {
visibility: hidden;
pointer-events: none;
}
`
}
@ -168,24 +160,23 @@ export function NumericKeypad({
const portraitKeyboardRef = useRef<any>(null)
const landscapeKeyboardRef = useRef<any>(null)
// Portrait layout: single row
// Portrait layout: single row (no empty spacer - buttons flex to fill)
const portraitLayout = {
default: showSubmitButton
? ['1 2 3 4 5 6 7 8 9 0 {bksp} {enter}']
: ['1 2 3 4 5 6 7 8 9 0 {bksp} {empty}'],
: ['1 2 3 4 5 6 7 8 9 0 {bksp}'],
}
// Landscape layout: 6 rows, 2 columns
// Landscape layout: 6 rows, 2 columns (backspace spans full width when no submit)
const landscapeLayout = {
default: showSubmitButton
? ['1 6', '2 7', '3 8', '4 9', '5 0', '{bksp} {enter}']
: ['1 6', '2 7', '3 8', '4 9', '5 0', '{bksp} {empty}'],
: ['1 6', '2 7', '3 8', '4 9', '5 0', '{bksp}'],
}
const display = {
'{bksp}': '⌫',
'{enter}': '✓',
'{empty}': '',
}
const handleKeyPress = useCallback(