From fe07fbdf59c2269d62a4a9fafe2c4219140d28ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Mon, 13 Apr 2026 07:59:36 +0200
Subject: [PATCH] Fix WaypointSheet safe area: add bottom inset padding

Close button was overlapping the home indicator. Now uses
useSafeAreaInsets() for dynamic bottom padding.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/mobile/lib/editor/WaypointSheet.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/lib/editor/WaypointSheet.tsx b/apps/mobile/lib/editor/WaypointSheet.tsx
index 03b7f9d..67026a1 100644
--- a/apps/mobile/lib/editor/WaypointSheet.tsx
+++ b/apps/mobile/lib/editor/WaypointSheet.tsx
@@ -1,4 +1,5 @@
 import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { Waypoint } from "@trails-cool/types";
 
 interface WaypointSheetProps {
@@ -16,6 +17,8 @@ export function WaypointSheet({
   onDelete,
   onToggleOvernight,
 }: WaypointSheetProps) {
+  const insets = useSafeAreaInsets();
+
   const handleDelete = () => {
     Alert.alert(
       "Delete Waypoint",
@@ -35,7 +38,7 @@ export function WaypointSheet({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { paddingBottom: 16 + insets.bottom }]}>
       <View style={styles.handle} />
       <Text style={styles.title}>
         Waypoint {index + 1}{waypoint.name ? `: ${waypoint.name}` : ""}
@@ -75,7 +78,6 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     padding: 16,
-    paddingBottom: 32,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: -2 },
     shadowOpacity: 0.1,