From 6c09976d4b89985aa75f6aa5a5a1e14481ad04e1 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 11 Dec 2025 09:22:28 -0600
Subject: [PATCH] fix(practice): only show landscape keypad on phone-sized
 screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/src/components/practice/NumericKeypad.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/practice/NumericKeypad.tsx b/apps/web/src/components/practice/NumericKeypad.tsx
index cf95488e..65d3420a 100644
--- a/apps/web/src/components/practice/NumericKeypad.tsx
+++ b/apps/web/src/components/practice/NumericKeypad.tsx
@@ -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%;
     }