diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index bb8ecfe990..a1cb521e49 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -440,7 +440,10 @@ function MobileMenu({
         className="fixed inset-0 z-40 sm:hidden"
         onClick={() => setIsMenuOpen(false)}
       />
-      <div className="fixed top-[69px] left-0 right-0 bg-white/80 backdrop-blur-sm border-b border-neutral-100 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] z-50 sm:hidden animate-in slide-in-from-top duration-300 max-h-[calc(100vh-69px)] overflow-y-auto">
+      <div
+        className="fixed top-[69px] left-0 right-0 bg-white/80 backdrop-blur-sm border-b border-neutral-100 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] z-50 sm:hidden animate-in slide-in-from-top duration-300 max-h-[calc(100vh-69px)] overflow-y-auto"
+        style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
+      >
         <nav className={`${maxWidthClass} mx-auto px-4 py-6`}>
           <div className="space-y-6">
             <MobileMenuLinks
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 015e79c3be..5c041a0d99 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -23,7 +23,10 @@ export const Route = createRootRouteWithContext<RouterContext>()({
   head: () => ({
     meta: [
       { charSet: "utf-8" },
-      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1, viewport-fit=cover",
+      },
       { title: TITLE },
       { name: "description", content: DESCRIPTION },
       { name: "keywords", content: KEYWORDS },
diff --git a/apps/web/src/routes/_view/route.tsx b/apps/web/src/routes/_view/route.tsx
index 206b77a47f..b3a0657d23 100644
--- a/apps/web/src/routes/_view/route.tsx
+++ b/apps/web/src/routes/_view/route.tsx
@@ -102,6 +102,7 @@ function MobileDocsDrawer({
         }`}
         style={{
           paddingLeft: "env(safe-area-inset-left)",
+          paddingBottom: "env(safe-area-inset-bottom)",
         }}
       >
         <div
@@ -189,6 +190,7 @@ function MobileHandbookDrawer({
         }`}
         style={{
           paddingLeft: "env(safe-area-inset-left)",
+          paddingBottom: "env(safe-area-inset-bottom)",
         }}
       >
         <div