Adam Jeniski
3d121c2e08
Use visualViewport API to dynamically resize the app container when the virtual keyboard opens, ensuring the input bar stays visible above the keyboard instead of being hidden behind it. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
46 lines
1.3 KiB
Svelte
46 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import { onMount, onDestroy } from 'svelte';
|
|
import { sessions } from '$lib/stores/sessions';
|
|
import { pushStore } from '$lib/stores/push';
|
|
|
|
let containerHeight = '100dvh';
|
|
|
|
function updateHeight() {
|
|
if (typeof window !== 'undefined' && window.visualViewport) {
|
|
// Use the visual viewport height to account for keyboard
|
|
containerHeight = `${window.visualViewport.height}px`;
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
sessions.load();
|
|
pushStore.init();
|
|
|
|
// Listen for navigation messages from service worker
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.addEventListener('message', (event) => {
|
|
if (event.data?.type === 'NAVIGATE' && event.data?.url) {
|
|
window.location.href = event.data.url;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Track visual viewport for keyboard handling
|
|
if (typeof window !== 'undefined' && window.visualViewport) {
|
|
updateHeight();
|
|
window.visualViewport.addEventListener('resize', updateHeight);
|
|
}
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (typeof window !== 'undefined' && window.visualViewport) {
|
|
window.visualViewport.removeEventListener('resize', updateHeight);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col bg-zinc-900 text-zinc-100 safe-top overflow-hidden" style="height: {containerHeight};">
|
|
<slot />
|
|
</div>
|