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

@@ -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]"

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>