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
2026-02-19 07:54:34 -06:00
parent 8fc7dff792
commit 49c493d2fa
2 changed files with 5 additions and 2 deletions
@@ -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>