From 4b8cbdf83cada8d35e19d567c99e4258f1c13d59 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 11 Dec 2025 09:04:26 -0600
Subject: [PATCH] fix(practice): ensure keypad spans full screen width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added explicit width: 100% and max-width: none to override
react-simple-keyboard defaults that may constrain width.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/practice/NumericKeypad.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/apps/web/src/components/practice/NumericKeypad.tsx b/apps/web/src/components/practice/NumericKeypad.tsx
index 447e21e7..107d3b6c 100644
--- a/apps/web/src/components/practice/NumericKeypad.tsx
+++ b/apps/web/src/components/practice/NumericKeypad.tsx
@@ -26,10 +26,15 @@ interface NumericKeypadProps {
  */
 function getPortraitStyles(isDark: boolean): string {
   return `
+    .keypad-portrait {
+      width: 100%;
+    }
     .keypad-portrait .simple-keyboard {
       background: ${isDark ? '#1a1a1a' : '#f5f5f5'};
       padding: 4px 2px;
       border-radius: 0;
+      width: 100%;
+      max-width: none;
     }
     .keypad-portrait .hg-row {
       display: flex;