fix: add safe area padding to scrollable content

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

View file

@ -148,7 +148,7 @@
</header>
<!-- 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 -->
<div class="absolute right-3 top-2" bind:this={menuEl}>
<button

View file

@ -395,7 +395,7 @@
</div>
<!-- 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}
<div class="flex items-center gap-2">
<!-- Status dot -->
@ -563,7 +563,7 @@
</div>
<!-- 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}
{#if app.lists.length === 0}
<div class="flex h-full flex-col items-center justify-center p-8 text-center">