From 633337da4eda964439d770ab7bf23afd95b036d6 Mon Sep 17 00:00:00 2001 From: Tristan Michael Date: Sun, 5 Apr 2026 17:28:46 -0700 Subject: [PATCH] Add safe area insets for mobile status bar and navigation Add viewport-fit=cover to the viewport meta tag and apply env(safe-area-inset-top/bottom) padding on mobile platforms. This prevents the app header from being obscured by the Android status bar, camera notch, and bottom gesture navigation area. --- apps/tauri/index.html | 2 +- apps/tauri/src/App.svelte | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/tauri/index.html b/apps/tauri/index.html index 72ab8a2..e1ee666 100644 --- a/apps/tauri/index.html +++ b/apps/tauri/index.html @@ -2,7 +2,7 @@ - + Onyx diff --git a/apps/tauri/src/App.svelte b/apps/tauri/src/App.svelte index a808fab..374f719 100644 --- a/apps/tauri/src/App.svelte +++ b/apps/tauri/src/App.svelte @@ -6,6 +6,7 @@ import TasksScreen from "./lib/screens/TasksScreen.svelte"; const isLinux = platform() === "linux"; + const isMobile = platform() === "android" || platform() === "ios"; onMount(() => { app.loadConfig(); @@ -18,7 +19,7 @@ class="relative h-full w-full overflow-hidden bg-surface-light text-text-light dark:bg-surface-dark dark:text-text-dark" class:rounded-xl={isLinux} class:linux-window-border={isLinux} - style="container-type: inline-size" + style="container-type: inline-size{isMobile ? '; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)' : ''}" > {#if app.error}