diff --git a/app/layout.tsx b/app/layout.tsx
index a6048171..ec50f651 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -20,6 +20,7 @@ const geistMono = Geist_Mono({
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
+  viewportFit: "cover",
 };
 
 export async function generateMetadata(): Promise<Metadata> {
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index 03e7593d..df932fb0 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -1793,7 +1793,7 @@ export function EmailComposer({
         )}
 
         {/* Bottom toolbar */}
-        <div className="flex items-center justify-between px-4 py-2.5 border-t bg-background shrink-0">
+        <div className="flex items-center justify-between px-4 py-2.5 border-t bg-background shrink-0 pb-[calc(env(safe-area-inset-bottom)/2)]">
           {/* Left side actions */}
           <div className="flex items-center gap-1">
             <input
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index bb682c2f..11253440 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -5283,7 +5283,7 @@ export function EmailViewer({
 
     {/* Mobile bottom action bar */}
     {isMobile && (
-      <nav className="fixed bottom-0 left-0 right-0 z-[50] bg-background border-t border-border sm:hidden overflow-hidden">
+      <nav className="fixed bottom-0 left-0 right-0 z-50 bg-background border-t border-border sm:hidden overflow-hidden pb-[calc(env(safe-area-inset-bottom)/2)]">
         <div className="flex items-center overflow-x-auto mobile-scroll-hidden">
           <button
             onClick={onNavigatePrev}
@@ -5433,4 +5433,4 @@ export function EmailViewer({
 
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/layout/navigation-rail.tsx b/components/layout/navigation-rail.tsx
index 6bb3db36..d4a7d3a8 100644
--- a/components/layout/navigation-rail.tsx
+++ b/components/layout/navigation-rail.tsx
@@ -273,7 +273,7 @@ export function NavigationRail({
   if (orientation === "horizontal") {
     return (
       <nav
-        className={cn("flex items-center bg-background border-t border-border shrink-0 overflow-x-auto mobile-scroll-hidden", className)}
+        className={cn("flex items-center bg-background border-t border-border shrink-0 overflow-x-auto mobile-scroll-hidden pb-[calc(env(safe-area-inset-bottom)/2)]", className)}
         role="navigation"
         aria-label={t("nav_label")}
       >