src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import type { ReactNode } from "react";
 import { Cormorant_Garamond, Manrope } from "next/font/google";
 import { DEFAULT_THEME, THEME_SCRIPT } from "@/lib/theme";
@@ -33,6 +33,9 @@ const cormorant = Cormorant_Garamond({
   display: "swap",
 });
 
+// viewport-fit=cover makes env(safe-area-inset-*) report the iPhone home indicator.
+export const viewport: Viewport = { width: "device-width", initialScale: 1, viewportFit: "cover" };
+
 export const metadata: Metadata = {
   title: "Minnect feed browser",
   description: "Sign in with your Minnect account to read and write the home feed.",

src/styles/sheet.css

@@ -29,7 +29,7 @@
   flex-direction: column;
   gap: 10px;
   max-height: 78%;
-  padding: 10px 14px calc(24px + env(safe-area-inset-bottom, 0px));
+  padding: 10px 14px max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
   background: var(--bg);
   color: var(--ink);
   border-radius: 26px 26px 0 0;