diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index f2be73ec..8db31d1e 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -385,11 +385,23 @@
 @media (display-mode: standalone) and (max-width: 768px) {
   .pwa-dialog-content {
     --pwa-dialog-padding: clamp(0.75rem, 3vw, 1.25rem);
-    top: calc(50% + (var(--oc-safe-area-top, 0px) * 0.22));
-    max-height: calc(100vh - var(--oc-safe-area-top, 0px) - var(--oc-safe-area-bottom-visual, 0px) - 20px);
+    /* Browsers that don't understand dvh ignore the second declaration and
+       keep the vh-based fallback. Newer browsers use 100dvh so Android
+       Chrome's collapsible URL bar doesn't push the dialog footer off-screen. */
+    max-height: calc(
+      100vh
+      - var(--oc-safe-area-top, 0px)
+      - var(--oc-safe-area-bottom-visual, 0px)
+      - 20px
+    );
+    max-height: calc(
+      100dvh
+      - var(--oc-safe-area-top, 0px)
+      - var(--oc-safe-area-bottom-visual, 0px)
+      - 20px
+    );
     padding: var(--pwa-dialog-padding);
     padding-top: calc(var(--pwa-dialog-padding) + (var(--oc-safe-area-top, 0px) * 0.35));
-    --tw-translate-y: calc(-50% + (var(--oc-safe-area-top, 0px) * 0.6));
     row-gap: clamp(0.75rem, 2vw, 1.25rem);
   }
 
@@ -407,6 +419,17 @@
     top: calc(0.2rem + (var(--oc-safe-area-top, 0px) * 0.3));
   }
 
+  /* iOS-only: the original PWA dialog was offset down to clear the
+     status bar / notch. Android centers fine on its own and the extra
+     `top` + translate combo pushed dialogs (and their action buttons)
+     below the visible viewport, so keep this scoped to iOS. */
+  @supports (-webkit-touch-callout: none) {
+    .pwa-dialog-content {
+      top: calc(50% + (var(--oc-safe-area-top, 0px) * 0.22));
+      --tw-translate-y: calc(-50% + (var(--oc-safe-area-top, 0px) * 0.6));
+    }
+  }
+
   .pwa-dialog-content .settings-page-body {
     max-width: 100%;
     padding: 0.75rem 1rem;