From 839171c0ff496605857f447e6e5abe84e1c376d0 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 11 Dec 2025 09:25:46 -0600
Subject: [PATCH] fix(practice): prevent keypad from covering nav and content
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add CSS to push main content away from the keypad:
- Landscape (small screens): padding-right on body and margin-right on
  nav/header/active-session to avoid the 100px right-side keypad
- Portrait: padding-bottom on body for the bottom keypad

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

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

diff --git a/apps/web/src/components/practice/NumericKeypad.tsx b/apps/web/src/components/practice/NumericKeypad.tsx
index 65d3420a..aeb55a90 100644
--- a/apps/web/src/components/practice/NumericKeypad.tsx
+++ b/apps/web/src/components/practice/NumericKeypad.tsx
@@ -40,6 +40,14 @@ function getPortraitStyles(isDark: boolean): string {
       .keypad-landscape-container {
         display: block;
       }
+      /* Push main content away from landscape keypad */
+      body {
+        padding-right: 100px !important;
+      }
+      /* Also handle common layout containers */
+      nav, header, [data-component="active-session"] {
+        margin-right: 100px;
+      }
     }
     /* On larger landscape screens, keep portrait bar at bottom */
     @media (orientation: landscape) and (min-height: 501px) {
@@ -50,6 +58,12 @@ function getPortraitStyles(isDark: boolean): string {
         display: none;
       }
     }
+    /* Add bottom padding for portrait keypad */
+    @media (orientation: portrait) {
+      body {
+        padding-bottom: 48px !important;
+      }
+    }
     .keypad-portrait {
       width: 100%;
     }