fix: keyboard visibility offset issue - remove problematic top positioning

- Remove top/bottom positioning from modal-content when keyboard visible
- Reset --viewport-offset-top to 0 when keyboard closes
- Add focusout handler to help reset keyboard state on iOS
- Simplify modal keyboard CSS to only adjust max-height

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/web/public/app.js

@@ -224,6 +224,9 @@ const KeyboardHandler = {
 
     // Focus event handling for scrolling inputs into view
     document.addEventListener('focusin', this.handleFocusIn.bind(this));
+
+    // Focusout handler to help reset state when leaving all inputs
+    document.addEventListener('focusout', this.handleFocusOut.bind(this));
   },
 
   /** Handle visualViewport resize - detect keyboard */
@@ -257,9 +260,14 @@ const KeyboardHandler = {
     this.isKeyboardVisible = visible;
     this.keyboardHeight = height;
 
-    // Update CSS custom property
+    // Update CSS custom properties
     document.documentElement.style.setProperty('--keyboard-height', `${height}px`);
 
+    // Reset viewport offset when keyboard closes
+    if (!visible) {
+      document.documentElement.style.setProperty('--viewport-offset-top', '0px');
+    }
+
     // Toggle class for CSS targeting
     document.body.classList.toggle('keyboard-visible', visible);
 
@@ -280,6 +288,28 @@ const KeyboardHandler = {
     }, 350);
   },
 
+  /** Handle focus leaving input elements - help reset keyboard state */
+  handleFocusOut(e) {
+    if (!this.isInputElement(e.target)) return;
+
+    // Small delay to check if focus moved to another input
+    setTimeout(() => {
+      const activeEl = document.activeElement;
+      // If focus left all inputs, ensure keyboard state is reset
+      if (!this.isInputElement(activeEl)) {
+        // The visualViewport resize event should handle this,
+        // but we reset just in case on iOS where it can be flaky
+        if (this.isKeyboardVisible && window.visualViewport) {
+          const vv = window.visualViewport;
+          const heightDiff = this.initialViewportHeight - vv.height;
+          if (heightDiff < 100) {
+            this.updateKeyboardState(false, 0);
+          }
+        }
+      }
+    }, 300);
+  },
+
   /** Check if element is an input that triggers keyboard */
   isInputElement(el) {
     if (!el) return false;