fix: respect ios safe areas

app/globals.css

@@ -46,7 +46,7 @@ html {
 }
 
 body {
-  min-height: 100vh;
+  min-height: 100dvh;
   background: hsl(var(--background));
   color: hsl(var(--foreground));
   -webkit-font-smoothing: antialiased;
@@ -89,12 +89,56 @@ select {
     scrollbar-gutter: stable;
   }
 
+  .app-header-safe {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .app-main-safe {
+    padding-bottom: calc(7rem + env(safe-area-inset-bottom));
+  }
+
+  .mobile-nav-safe {
+    bottom: calc(0.75rem + env(safe-area-inset-bottom));
+    left: calc(0.75rem + env(safe-area-inset-left));
+    right: calc(0.75rem + env(safe-area-inset-right));
+  }
+
   .modal-overlay {
     position: fixed;
     inset: -1px 0 0;
+    box-sizing: border-box;
+    height: calc(100dvh + 1px);
     min-height: calc(100dvh + 1px);
     background: hsl(var(--foreground) / 0.55);
   }
+
+  .modal-safe-area {
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+  }
+}
+
+@media (min-width: 640px) {
+  @layer utilities {
+    .modal-safe-area {
+      padding:
+        calc(1rem + env(safe-area-inset-top))
+        calc(1rem + env(safe-area-inset-right))
+        calc(1rem + env(safe-area-inset-bottom))
+        calc(1rem + env(safe-area-inset-left));
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  @layer utilities {
+    .modal-safe-area {
+      padding:
+        calc(2rem + env(safe-area-inset-top))
+        calc(2rem + env(safe-area-inset-right))
+        calc(2rem + env(safe-area-inset-bottom))
+        calc(2rem + env(safe-area-inset-left));
+    }
+  }
 }
 
 @supports (-moz-appearance: none) {