diff --git a/internal/service/static/main.js b/internal/service/static/main.js index a643102..da4ae13 100644 --- a/internal/service/static/main.js +++ b/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. */