From 6e5b4ec7bf7e2af5f724628693d3c4ee8c5b3968 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 28 Sep 2025 10:25:44 -0500
Subject: [PATCH] fix: reposition on-screen keyboard to avoid covering abacus
 tiles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed on-screen keyboard from inline layout to fixed position at bottom
- Added proper spacing and shadow for better visibility
- Added bottom padding to main container when keyboard is shown
- Made keyboard more compact with smaller buttons and reduced gaps
- Ensures all abacus tiles remain accessible during input

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/games/memory-quiz/page.tsx | 25 ++++++++++++++-------
 1 file changed, 17 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 6acc3c12..a62f9718 100644
--- a/apps/web/src/app/games/memory-quiz/page.tsx
+++ b/apps/web/src/app/games/memory-quiz/page.tsx
@@ -1142,12 +1142,14 @@ function InputPhase({ state, dispatch }: { state: SorobanQuizState; dispatch: Re
     <div style={{
       textAlign: 'center',
       padding: '12px',
+      paddingBottom: hasPhysicalKeyboard === false ? '180px' : '12px', // Extra space for on-screen keyboard
       maxWidth: '800px',
       margin: '0 auto',
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'flex-start'
+      justifyContent: 'flex-start',
+      minHeight: '100vh' // Ensure container can scroll if needed
     }}>
       <h3 style={{ marginBottom: '16px', color: '#1f2937', fontSize: '18px', fontWeight: '600' }}>Enter the Numbers You Remember</h3>
       <div style={{
@@ -1342,11 +1344,18 @@ function InputPhase({ state, dispatch }: { state: SorobanQuizState; dispatch: Re
       {/* On-screen number pad for devices without physical keyboard */}
       {hasPhysicalKeyboard === false && state.guessesRemaining > 0 && (
         <div style={{
-          marginTop: '16px',
+          position: 'fixed',
+          bottom: '12px',
+          left: '50%',
+          transform: 'translateX(-50%)',
           padding: '12px',
           background: '#f8fafc',
           borderRadius: '12px',
-          border: '1px solid #e2e8f0'
+          border: '1px solid #e2e8f0',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+          zIndex: 1000,
+          maxWidth: '280px',
+          width: 'calc(100vw - 24px)' // Ensure it doesn't exceed screen width
         }}>
           <div style={{
             textAlign: 'center',
@@ -1360,15 +1369,15 @@ function InputPhase({ state, dispatch }: { state: SorobanQuizState; dispatch: Re
           <div style={{
             display: 'grid',
             gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: '8px',
-            maxWidth: '240px',
+            gap: '6px',
+            maxWidth: '220px',
             margin: '0 auto'
           }}>
             {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(digit => (
               <button
                 key={digit}
                 style={{
-                  padding: '16px 12px',
+                  padding: '14px 10px',
                   border: '2px solid #cbd5e1',
                   borderRadius: '8px',
                   background: 'white',
@@ -1408,7 +1417,7 @@ function InputPhase({ state, dispatch }: { state: SorobanQuizState; dispatch: Re
             {/* Bottom row: 0 and backspace */}
             <button
               style={{
-                padding: '16px 12px',
+                padding: '14px 10px',
                 border: '2px solid #cbd5e1',
                 borderRadius: '8px',
                 background: 'white',
@@ -1448,7 +1457,7 @@ function InputPhase({ state, dispatch }: { state: SorobanQuizState; dispatch: Re
               <button
                 style={{
                   width: '100%',
-                  padding: '16px 12px',
+                  padding: '14px 10px',
                   border: '2px solid #dc2626',
                   borderRadius: '8px',
                   background: '#fef2f2',