From 5e5773d14632f92da012f17fd764bb5dd1f48aa7 Mon Sep 17 00:00:00 2001
From: Tristan Michael <steeldynamite@gmail.com>
Date: Mon, 6 Apr 2026 11:03:06 -0700
Subject: [PATCH] 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.
---
 apps/tauri/src/lib/components/TaskDetailView.svelte | 2 +-
 apps/tauri/src/lib/screens/TasksScreen.svelte       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/tauri/src/lib/components/TaskDetailView.svelte b/apps/tauri/src/lib/components/TaskDetailView.svelte
index dcb6f00..88a3498 100644
--- a/apps/tauri/src/lib/components/TaskDetailView.svelte
+++ b/apps/tauri/src/lib/components/TaskDetailView.svelte
@@ -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
diff --git a/apps/tauri/src/lib/screens/TasksScreen.svelte b/apps/tauri/src/lib/screens/TasksScreen.svelte
index 127c4c6..b5457cb 100644
--- a/apps/tauri/src/lib/screens/TasksScreen.svelte
+++ b/apps/tauri/src/lib/screens/TasksScreen.svelte
@@ -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">