Handle visual viewport

internal/service/static/main.js

@@ -192,6 +192,7 @@ class Odidere {
     this.#fetchVoices();
     this.#fetchModels();
     this.#initWakeLock();
+    this.#initVisualViewport();
   }
 
   /**
@@ -2953,6 +2954,28 @@ class Odidere {
     }
   }
 
+  /**
+   * #initVisualViewport handles pinch-zoom on mobile by keeping the
+   * container height in sync with the visual viewport. Without this,
+   * the bottom toolbar vanishes off-screen when the user zooms in.
+   */
+  #initVisualViewport() {
+    if (!window.visualViewport) return;
+
+    const container = this.document.querySelector('.container');
+    if (!container) return;
+
+    const handler = () => {
+      const h = visualViewport.height;
+      if (h > 0) {
+        container.style.height = `${h}px`;
+      }
+    };
+
+    visualViewport.addEventListener('resize', handler);
+    handler();
+  }
+
   /**
    * #acquireWakeLock requests a screen wake lock. Idempotent.
    */