Try a visualViewport resize handler to fix the dialog height on mobil…

…e Safari

src/common/misc.ts

@@ -3,7 +3,7 @@
 Miscellaneous common things
 ===========================
 
-Copyright (c) 2023 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
@@ -66,6 +66,14 @@ export function BEBuffer_to_Array(buf: Uint8Array) {
     return arr
 }
 
+/** If we can determine that the browser is currently pinch zoomed */
+export function is_pinch_zoomed() {
+    if (visualViewport) {
+        return (visualViewport.scale - 1) > 0.001
+    }
+    return false
+}
+
 export function is_unicode_array(arr: GlkTypedArray) {
     return arr.BYTES_PER_ELEMENT === 4
 }

src/dialog/browser/ui/BaseDialog.svelte

@@ -1,24 +1,46 @@
 <script lang="ts">
+    import {is_pinch_zoomed} from '../../../common/misc.js'
+
     let dialog: HTMLDialogElement
     export let extra_class = ''
+    /** Whether or not the dialog should use the full viewport in mobile browsers*/
+    export let fullscreen = false
     let promise_resolve: (res: string | boolean) => void
     let title = ''
 
     export async function open(_title: string): Promise<string | boolean> {
         title = _title
         const promise: Promise<string | boolean> = new Promise((resolve) => promise_resolve = resolve)
         dialog.showModal()
+        if (fullscreen && visualViewport) {
+            visualViewport.addEventListener('resize', on_visualViewport_resize)
+        }
         return promise
     }
 
     export function resolve(val: string | boolean) {
         dialog.close()
+        if (fullscreen && visualViewport) {
+            visualViewport.removeEventListener('resize', on_visualViewport_resize)
+            dialog.style.height = ''
+        }
         promise_resolve(val)
     }
 
     function on_close() {
         resolve(false)
     }
+
+    function on_visualViewport_resize() {
+        // Don't do anything if the window is pinch zoomed
+        if (is_pinch_zoomed()){
+            return
+        }
+
+        // The iOS virtual keyboard does not change the layout height, but it does change the viewport
+        // Try to account for this by setting the dialog to the viewport height
+        dialog.style.height = visualViewport!.height + 'px'
+    }
 </script>
 
 <style>
@@ -53,6 +75,18 @@
         width: 100%;
     }
 
+    dialog.fullscreen {
+        margin-top: 0;
+    }
+
+    @media screen and (max-width: 767px) {
+        dialog.fullscreen {
+            border: none !important;
+            max-height: none !important;
+            max-width: none !important;
+        }
+    }
+
     dialog::backdrop {
         background: linear-gradient(rgba(64, 64, 64, 25%), rgba(64, 64, 64, 40%));
     }
@@ -96,6 +130,7 @@
 </style>
 
 <dialog bind:this={dialog}
+    class:fullscreen
     class={extra_class}
     on:close={on_close}
 >

src/dialog/browser/ui/FileDialog.svelte

@@ -164,18 +164,12 @@
 </script>
 
 <style>
+    /* TODO: consider changing to an ID rather than a class, however that would need a regtest-html update */
     :global(dialog.asyncglk_file_dialog) {
         max-height: 500px !important;
         max-width: 700px !important;
     }
 
-    @media screen and (max-width: 767px) {
-        :global(dialog.asyncglk_file_dialog) {
-            max-height: none !important;
-            max-width: none !important;
-        }
-    }
-
     .actions {
         text-align: right;
     }
@@ -198,6 +192,7 @@
 <BaseDialog
     bind:this={base_dialog}
     extra_class="asyncglk_file_dialog {!saving ? 'selecting' : ''}"
+    fullscreen
 >
     <div class="actions">
         <button on:click={on_add_file}>Add file</button>

src/glkote/web/input.ts

@@ -3,17 +3,17 @@
 GlkOte input handlers
 =====================
 
-Copyright (c) 2023 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
 */
 import {throttle} from 'lodash-es'
 
 import {KEY_CODE_DOWN, KEY_CODE_RETURN, KEY_CODE_UP, KEY_CODES_TO_NAMES, OFFSCREEN_OFFSET} from '../../common/constants.js'
+import {is_pinch_zoomed} from '../../common/misc.js'
 import * as protocol from '../../common/protocol.js'
 
-import {is_pinch_zoomed} from './shared.js'
 import {apply_text_run_styles, type Window} from './windows.js'
 
 const MAX_HISTORY_LENGTH = 25

src/glkote/web/metrics.ts

@@ -11,9 +11,10 @@ https://github.com/curiousdannii/asyncglk
 
 import {throttle} from 'lodash-es'
 
+import {is_pinch_zoomed} from '../../common/misc.js'
 import * as protocol from '../../common/protocol.js'
 
-import {create, is_pinch_zoomed} from './shared.js'
+import {create} from './shared.js'
 import WebGlkOte from './web.js'
 
 function get_size(el: JQuery<HTMLElement>): {height: number, width: number} {

src/glkote/web/shared.ts

@@ -71,12 +71,4 @@ export class DOM {
     }
 }
 
-export type EventFunc = (event: Partial<protocol.Event>) => void
-
-/** If we can determine that the browser is currently pinch zoomed */
-export function is_pinch_zoomed() {
-    if (visualViewport) {
-        return (visualViewport.scale - 1) > 0.001
-    }
-    return false
-}
+export type EventFunc = (event: Partial<protocol.Event>) => void

src/glkote/web/windows.ts

@@ -3,7 +3,7 @@
 GlkOte windows
 ==============
 
-Copyright (c) 2023 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
@@ -13,10 +13,11 @@ import {debounce} from 'lodash-es'
 
 import {Blorb} from '../../blorb/blorb.js'
 import {NBSP} from '../../common/constants.js'
+import {is_pinch_zoomed} from '../../common/misc.js'
 import * as protocol from '../../common/protocol.js'
 
 import {TextInput} from './input.js'
-import {create, DOM, type EventFunc, is_pinch_zoomed} from './shared.js'
+import {create, DOM, type EventFunc} from './shared.js'
 import WebGlkOte from './web.js'
 
 export type Window = BufferWindow | GraphicsWindow | GridWindow