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

fix: add safe area padding to scrollable content

Browse source 
Add safe area padding to scrollable main content areas and
adjust drawer footer padding to prevent content from being
hidden behind notches and home indicators on mobile devices.
This ensures proper spacing on devices with safe area insets.
This commit is contained in:
Tristan Michael 2026-04-06 11:03:06 -07:00
parent c772e3251a
commit 5e5773d146
2 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/tauri/src/lib/components/TaskDetailView.svelte
View file

@ -148,7 +148,7 @@
</header> </header>
<!-- Content --> <!-- Content -->
<main class="relative flex-1 overflow-y-auto px-4 pt-4"> <main class="relative flex-1 overflow-y-auto px-4 pt-4" style="padding-bottom: max(2rem, var(--safe-bottom))">
<!-- Kebab menu --> <!-- Kebab menu -->
<div class="absolute right-3 top-2" bind:this={menuEl}> <div class="absolute right-3 top-2" bind:this={menuEl}>
<button <button

4
apps/tauri/src/lib/screens/TasksScreen.svelte
View file

@ -395,7 +395,7 @@
</div> </div>
<!-- Drawer footer: sync status --> <!-- Drawer footer: sync status -->
<div class="shrink-0 px-4 py-2.5" style="padding-bottom: max(0.625rem, var(--safe-bottom))"> <div class="shrink-0 px-4 py-2.5" style="padding-bottom: max(1.25rem, var(--safe-bottom))">
{#if app.isWebdav} {#if app.isWebdav}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<!-- Status dot --> <!-- Status dot -->
@ -563,7 +563,7 @@
</div> </div>
<!-- Task list --> <!-- Task list -->
<main class="flex-1 overflow-y-auto"> <main class="flex-1 overflow-y-auto" style="padding-bottom: max(6rem, var(--safe-bottom))">
{#key app.activeListId} {#key app.activeListId}
{#if app.lists.length === 0} {#if app.lists.length === 0}
<div class="flex h-full flex-col items-center justify-center p-8 text-center"> <div class="flex h-full flex-col items-center justify-center p-8 text-center">