diff --git a/web/src/components/ImagePreview.tsx b/web/src/components/ImagePreview.tsx
index 49db13b6..594977f3 100644
--- a/web/src/components/ImagePreview.tsx
+++ b/web/src/components/ImagePreview.tsx
@@ -240,7 +240,7 @@ export function ImagePreview(props: {
                     aria-modal="true"
                     aria-label={props.label}
                 >
-                    <div className="flex items-center gap-2 border-b border-white/10 bg-black/50 px-3 py-2">
+                    <div className="flex items-center gap-2 border-b border-white/10 bg-black/50 px-3 pb-2 pt-[calc(env(safe-area-inset-top)+0.5rem)]">
                         <div className="min-w-0 flex-1 truncate text-sm font-medium">{props.fileName}</div>
                         <button
                             type="button"
diff --git a/web/src/components/OfflineBanner.tsx b/web/src/components/OfflineBanner.tsx
index 9d5d0c61..966f7ff2 100644
--- a/web/src/components/OfflineBanner.tsx
+++ b/web/src/components/OfflineBanner.tsx
@@ -10,7 +10,7 @@ export function OfflineBanner() {
     }
 
     return (
-        <div className="fixed top-0 left-0 right-0 bg-amber-500 text-white text-center py-2 text-sm font-medium z-50">
+        <div className="fixed top-0 left-0 right-0 bg-amber-500 text-white text-center pb-2 pt-[calc(env(safe-area-inset-top)+0.5rem)] text-sm font-medium z-50">
             {t('offline.message')}
         </div>
     )
diff --git a/web/src/components/PwaUpdateBanner.test.tsx b/web/src/components/PwaUpdateBanner.test.tsx
index aeb68dd9..6b2eb508 100644
--- a/web/src/components/PwaUpdateBanner.test.tsx
+++ b/web/src/components/PwaUpdateBanner.test.tsx
@@ -117,7 +117,9 @@ describe('PwaUpdateBanner', () => {
             </I18nProvider>,
         )
 
-        expect(screen.getByTestId('pwa-update-banner')).toHaveClass('top-12')
+        expect(screen.getByTestId('pwa-update-banner')).toHaveClass(
+            'top-[calc(env(safe-area-inset-top)+3rem)]'
+        )
     })
 
     it('expands the rationale section when the disclosure is opened', () => {
diff --git a/web/src/components/PwaUpdateBanner.tsx b/web/src/components/PwaUpdateBanner.tsx
index 1f78c8aa..42d33f53 100644
--- a/web/src/components/PwaUpdateBanner.tsx
+++ b/web/src/components/PwaUpdateBanner.tsx
@@ -14,7 +14,9 @@ export function PwaUpdateBanner({ topClassName }: { topClassName?: string } = {}
         return null
     }
 
-    const topClass = topClassName ?? (isOnline ? 'top-2' : 'top-10')
+    const topClass = topClassName ?? (isOnline
+        ? 'top-[calc(env(safe-area-inset-top)+0.5rem)]'
+        : 'top-[calc(env(safe-area-inset-top)+2.5rem)]')
 
     return (
         <div
@@ -68,6 +70,10 @@ export function PwaUpdateBannerWithStatusOffset({
         Boolean(voice && voice.status === 'error' && voice.errorMessage)
 
     return (
-        <PwaUpdateBanner topClassName={hasTopStatusBanner ? 'top-12' : undefined} />
+        <PwaUpdateBanner
+            topClassName={hasTopStatusBanner
+                ? 'top-[calc(env(safe-area-inset-top)+3rem)]'
+                : undefined}
+        />
     )
 }
diff --git a/web/src/components/ReconnectingBanner.tsx b/web/src/components/ReconnectingBanner.tsx
index 76829771..bb7e1ea4 100644
--- a/web/src/components/ReconnectingBanner.tsx
+++ b/web/src/components/ReconnectingBanner.tsx
@@ -34,7 +34,7 @@ export function ReconnectingBanner({
     }
 
     return (
-        <div className="fixed top-0 left-0 right-0 bg-amber-500 text-white text-center py-2 text-sm font-medium z-50 flex items-center justify-center gap-2">
+        <div className="fixed top-0 left-0 right-0 bg-amber-500 text-white text-center pb-2 pt-[calc(env(safe-area-inset-top)+0.5rem)] text-sm font-medium z-50 flex items-center justify-center gap-2">
             <span className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
             {t('reconnecting.message')}
             {reasonLabel ? <span className="opacity-90">({reasonLabel})</span> : null}
diff --git a/web/src/components/SessionActionMenu.tsx b/web/src/components/SessionActionMenu.tsx
index 1456835a..d18acbd8 100644
--- a/web/src/components/SessionActionMenu.tsx
+++ b/web/src/components/SessionActionMenu.tsx
@@ -289,7 +289,7 @@ export function SessionActionMenu(props: SessionActionMenuProps) {
 
     const menuStyle: CSSProperties | undefined = menuPosition
         ? {
-            top: menuPosition.top,
+            top: `max(${menuPosition.top}px, calc(env(safe-area-inset-top) + 8px))`,
             left: menuPosition.left,
             transformOrigin: menuPosition.transformOrigin
         }
diff --git a/web/src/components/SyncingBanner.tsx b/web/src/components/SyncingBanner.tsx
index 8499b1e0..3b7e28e3 100644
--- a/web/src/components/SyncingBanner.tsx
+++ b/web/src/components/SyncingBanner.tsx
@@ -12,7 +12,7 @@ export function SyncingBanner({ isSyncing }: { isSyncing: boolean }) {
     }
 
     return (
-        <div className="fixed top-0 left-0 right-0 bg-[var(--app-banner-bg)] text-[var(--app-banner-text)] text-center py-2 text-sm font-medium z-50 flex items-center justify-center gap-2 border-b border-[var(--app-divider)]">
+        <div className="fixed top-0 left-0 right-0 bg-[var(--app-banner-bg)] text-[var(--app-banner-text)] text-center pb-2 pt-[calc(env(safe-area-inset-top)+0.5rem)] text-sm font-medium z-50 flex items-center justify-center gap-2 border-b border-[var(--app-divider)]">
             <Spinner size="sm" label={null} className="text-[var(--app-banner-text)]" />
             {t('syncing.title')}
         </div>
diff --git a/web/src/components/VoiceErrorBanner.tsx b/web/src/components/VoiceErrorBanner.tsx
index d0a98c0a..6ba1d9e2 100644
--- a/web/src/components/VoiceErrorBanner.tsx
+++ b/web/src/components/VoiceErrorBanner.tsx
@@ -21,7 +21,7 @@ export function VoiceErrorBanner() {
     }
 
     return (
-        <div className="fixed top-0 left-0 right-0 bg-red-500 text-white text-center py-2 text-sm font-medium z-50 flex items-center justify-center border-b border-red-600">
+        <div className="fixed top-0 left-0 right-0 bg-red-500 text-white text-center pb-2 pt-[calc(env(safe-area-inset-top)+0.5rem)] text-sm font-medium z-50 flex items-center justify-center border-b border-red-600">
             {voice.errorMessage}
         </div>
     )