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.

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(
-      "--app-nav-offset",
-      `${navElementRef.current.offsetHeight}px`,
-    );
+    setNavOffset(`${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]);