fix(practice): prevent keypad from covering nav and content

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

@@ -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%;
     }