Pin bottom nav to viewport and reserve scroll clearance.

Track visual viewport for keyboard offset, add bottom spacer, use solid
nav background with safe-area padding, and avoid zero nav offset fallback.

app/(app)/layout.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 
 import { AppAuthGate } from "@/components/layout/app-auth-gate";
+import { AppBottomSpacer } from "@/components/layout/app-bottom-spacer";
 import { DailyReminderProvider } from "@/components/reminders/daily-reminder-provider";
 import { InAppReminderBanner } from "@/components/reminders/in-app-reminder-banner";
 
@@ -14,7 +15,10 @@ export default function AppLayout({
       <AppAuthGate>
         <DailyReminderProvider />
         <InAppReminderBanner />
-        <div className="pb-nav">{children}</div>
+        <div>
+          {children}
+          <AppBottomSpacer />
+        </div>
       </AppAuthGate>
     </Suspense>
   );

app/globals.css

@@ -5,7 +5,8 @@
 @layer base {
   :root {
     --app-topbar-height: 3.5rem;
-    --app-nav-offset: var(--bottom-nav-height);
+    --app-viewport-bottom-offset: 0px;
+    --app-nav-offset: 6rem;
     --bottom-nav-height: 6rem;
     --background: 252 38% 10%;
     --foreground: 52 100% 88%;
@@ -68,6 +69,7 @@
 
   html {
     overflow-x: clip;
+    scroll-padding-bottom: var(--app-nav-offset, var(--bottom-nav-height));
   }
 
   body {
@@ -170,7 +172,14 @@
 
 @layer utilities {
   .pb-nav {
-    padding-bottom: var(--app-nav-offset);
+    padding-bottom: var(--app-nav-offset, var(--bottom-nav-height));
+  }
+
+  .pb-nav-safe {
+    padding-bottom: calc(
+      var(--app-nav-offset, var(--bottom-nav-height)) +
+        var(--app-viewport-bottom-offset, 0px)
+    );
   }
 
   .pt-topbar {

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Press_Start_2P } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 
@@ -16,6 +16,13 @@ export const metadata: Metadata = {
   description: "Build habits, care for your pixel pet, and track wellness every day.",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+  interactiveWidget: "resizes-content",
+};
+
 const pixelFont = Press_Start_2P({
   weight: "400",
   subsets: ["latin"],

components/layout/app-bottom-spacer.tsx

@@ -0,0 +1,12 @@
+export function AppBottomSpacer() {
+  return (
+    <div
+      aria-hidden
+      className="app-bottom-spacer w-full shrink-0"
+      style={{
+        minHeight:
+          "calc(var(--app-nav-offset, var(--bottom-nav-height)) + var(--app-viewport-bottom-offset, 0px))",
+      }}
+    />
+  );
+}

components/layout/app-nav.tsx

@@ -50,7 +50,11 @@ export const AppNav = forwardRef<HTMLElement, AppNavProps>(function AppNav(
   return (
     <nav
       ref={ref}
-      className="bottom-nav fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
+      className="bottom-nav fixed inset-x-0 z-50 border-t-2 border-border bg-background shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)]"
+      style={{
+        bottom: "var(--app-viewport-bottom-offset, 0px)",
+        paddingBottom: "env(safe-area-inset-bottom, 0px)",
+      }}
     >
       <div
         aria-hidden
@@ -58,7 +62,7 @@ export const AppNav = forwardRef<HTMLElement, AppNavProps>(function AppNav(
       />
       <div
         className={cn(
-          "mx-auto grid max-w-6xl gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
+          "mx-auto grid max-w-6xl gap-1 px-2 pb-2 pt-2",
           gridColsClass[columnCount],
         )}
       >

components/layout/nav-offset-provider.tsx

@@ -10,6 +10,8 @@ import {
   type Ref,
 } from "react";
 
+const NAV_OFFSET_FALLBACK = "6rem";
+
 type NavOffsetContextValue = {
   setNavElement: (element: HTMLElement | null) => void;
 };
@@ -38,6 +40,17 @@ type NavOffsetProviderProps = {
   enabled?: boolean;
 };
 
+function setNavOffset(value: string) {
+  document.documentElement.style.setProperty("--app-nav-offset", value);
+}
+
+function setViewportBottomOffset(value: string) {
+  document.documentElement.style.setProperty(
+    "--app-viewport-bottom-offset",
+    value,
+  );
+}
+
 export function NavOffsetProvider({
   children,
   enabled = true,
@@ -46,19 +59,30 @@ export function NavOffsetProvider({
   const observerRef = useRef<ResizeObserver | null>(null);
 
   const syncOffset = useCallback(() => {
-    const root = document.documentElement;
-
     if (!enabled || !navElementRef.current) {
-      root.style.setProperty("--app-nav-offset", "0px");
+      setNavOffset(enabled ? NAV_OFFSET_FALLBACK : "0px");
       return;
     }
 
-    root.style.setProperty(
+    setNavOffset(`${navElementRef.current.offsetHeight}px`);
-      "--app-nav-offset",
-      `${navElementRef.current.offsetHeight}px`,
-    );
   }, [enabled]);
 
+  const syncViewportBottom = useCallback(() => {
+    const viewport = window.visualViewport;
+
+    if (!viewport) {
+      setViewportBottomOffset("0px");
+      return;
+    }
+
+    const keyboardGap = Math.max(
+      0,
+      window.innerHeight - viewport.height - viewport.offsetTop,
+    );
+
+    setViewportBottomOffset(`${keyboardGap}px`);
+  }, []);
+
   const setNavElement = useCallback(
     (element: HTMLElement | null) => {
       if (observerRef.current) {
@@ -86,20 +110,34 @@ export function NavOffsetProvider({
 
   useEffect(() => {
     syncOffset();
+    syncViewportBottom();
+
     window.addEventListener("resize", syncOffset);
+    window.addEventListener("resize", syncViewportBottom);
+
+    const viewport = window.visualViewport;
+    viewport?.addEventListener("resize", syncViewportBottom);
+    viewport?.addEventListener("scroll", syncViewportBottom);
 
     return () => {
       window.removeEventListener("resize", syncOffset);
+      window.removeEventListener("resize", syncViewportBottom);
+      viewport?.removeEventListener("resize", syncViewportBottom);
+      viewport?.removeEventListener("scroll", syncViewportBottom);
+
       if (observerRef.current) {
         observerRef.current.disconnect();
       }
-      document.documentElement.style.setProperty("--app-nav-offset", "0px");
+
+      setNavOffset(NAV_OFFSET_FALLBACK);
+      setViewportBottomOffset("0px");
     };
-  }, [syncOffset]);
+  }, [syncOffset, syncViewportBottom]);
 
   useEffect(() => {
     if (!enabled) {
       setNavElement(null);
+      setNavOffset("0px");
     }
   }, [enabled, setNavElement]);
 

components/reminders/in-app-reminder-banner.tsx

@@ -36,7 +36,10 @@ export function InAppReminderBanner() {
       role="status"
       aria-live="polite"
       className="fixed inset-x-0 z-[60] px-4 pb-[env(safe-area-inset-bottom,0px)]"
-      style={{ bottom: "calc(var(--app-nav-offset, var(--bottom-nav-height)) + 0.5rem)" }}
+      style={{
+        bottom:
+          "calc(var(--app-viewport-bottom-offset, 0px) + var(--app-nav-offset, var(--bottom-nav-height)) + 0.5rem)",
+      }}
     >
       <div className="mx-auto flex max-w-lg items-start gap-3 rounded-xl border border-primary/30 bg-card p-4 shadow-lg">
         <div className="rounded-full bg-primary/10 p-2">

components/ui/toast-provider.tsx

@@ -46,7 +46,10 @@ export function ToastProvider({ children }: { children: ReactNode }) {
       <div
         aria-live="polite"
         className="pointer-events-none fixed right-4 z-[60] flex w-[min(100vw-2rem,20rem)] flex-col gap-2"
-        style={{ bottom: "calc(var(--app-nav-offset, var(--bottom-nav-height)) + 0.75rem)" }}
+        style={{
+          bottom:
+            "calc(var(--app-viewport-bottom-offset, 0px) + var(--app-nav-offset, var(--bottom-nav-height)) + 0.75rem)",
+        }}
       >
         {messages.map((message) => (
           <div