From 49c493d2fa2fd7ea4e330ddce45d0a979dfe1355 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Thu, 19 Feb 2026 07:54:34 -0600
Subject: [PATCH] Fix safe area padding in mobile drawer

- Add safe area top padding to Sheet close button (X icon)
- Add safe area bottom padding to theme toggle section
- Ensures UI elements don't overlap with device notches/navigation bars
---
 src/components/MobileDrawer.tsx | 2 +-
 src/components/ui/sheet.tsx     | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/MobileDrawer.tsx b/src/components/MobileDrawer.tsx
index e8363384..6b9c679c 100644
--- a/src/components/MobileDrawer.tsx
+++ b/src/components/MobileDrawer.tsx
@@ -173,7 +173,7 @@ export function MobileDrawer({ open, onOpenChange }: MobileDrawerProps) {
             <Separator />
 
             {/* Theme toggle */}
-            <div className="px-3 py-2">
+            <div className="px-3 py-2 safe-area-bottom">
               <button
                 onClick={cycleTheme}
                 className="flex items-center justify-between w-full py-3.5 px-2 rounded-lg hover:bg-secondary/60 transition-colors text-[15px]"
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 7b1dbe4c..26ce3e41 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -63,7 +63,10 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close 
+        className="absolute right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+        style={{ top: `calc(1rem + env(safe-area-inset-top, 0px))` }}
+      >
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>