SteelDynamite/onyx-tasks
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add safe area insets for mobile status bar and navigation

Browse source 
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.
This commit is contained in:
Tristan Michael 2026-04-05 17:28:46 -07:00
parent 192b449e87
commit 633337da4e
2 changed files with 3 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/tauri/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Onyx</title>
</head>
<body>

3
apps/tauri/src/App.svelte
View file

@ -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}
<div