From 7adbaca7978143976e095568024aba8e7f23fddc Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Tue, 2 Jun 2026 20:26:48 +0300
Subject: [PATCH] fix: mobile dialog and overlay panel positioning

Center PWA dialogs again by dropping the stale iOS offset that pushed a
flex-centered (position: relative) dialog down by half the viewport.

Seat the mobile overlay panel flush to the bottom (drop the float margin),
drop its bottom border in favor of a scroll shadow on the content, and raise
it above sheets (z-60) so an overlay opened over a surface sheet renders on
top instead of behind it.
---
 .../ui/src/components/ui/MobileOverlayPanel.tsx    |  6 +++---
 packages/ui/src/styles/mobile.css                  | 14 +-------------
 2 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/ui/MobileOverlayPanel.tsx b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
index 23ded84e..9a3b2044 100644
--- a/packages/ui/src/components/ui/MobileOverlayPanel.tsx
+++ b/packages/ui/src/components/ui/MobileOverlayPanel.tsx
@@ -70,14 +70,14 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
 
   const content = (
     <div
-      className="fixed inset-0 z-50 flex flex-col bg-[rgb(0_0_0_/_0.45)]"
+      className="fixed inset-0 z-[60] flex flex-col bg-[rgb(0_0_0_/_0.45)]"
       role="dialog"
       aria-modal="true"
       onClick={onClose}
     >
         <div
           className={cn(
-            'mt-auto flex max-h-[calc(100dvh-0.75rem)] min-h-0 w-full flex-col rounded-t-xl border border-border/50 bg-background shadow-none pwa-overlay-panel',
+            'mt-auto flex max-h-[calc(100dvh-0.75rem)] min-h-0 w-full flex-col rounded-t-xl border-x border-t border-border/50 bg-background shadow-none pwa-overlay-panel',
             'mx-auto max-w-lg',
             className
           )}
@@ -105,7 +105,7 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
             </div>
           );
         })()}
-        <ScrollableOverlay outerClassName={cn('min-h-0 flex-1', contentMaxHeight)} className="px-2 py-2 pwa-overlay-scroll">
+        <ScrollableOverlay useScrollShadow disableHorizontal outerClassName={cn('min-h-0 flex-1', contentMaxHeight)} className="px-2 py-2 pwa-overlay-scroll">
           {children}
         </ScrollableOverlay>
         {footer ? (
diff --git a/packages/ui/src/styles/mobile.css b/packages/ui/src/styles/mobile.css
index 8db31d1e..7b4daed9 100644
--- a/packages/ui/src/styles/mobile.css
+++ b/packages/ui/src/styles/mobile.css
@@ -419,17 +419,6 @@
     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;
@@ -449,8 +438,7 @@
   }
 
   .pwa-overlay-panel {
-    margin-bottom: max(var(--oc-safe-area-bottom-visual, 0px), 12px);
-    padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) * 0.4);
+    margin-bottom: 0;
   }
 
   .pwa-overlay-panel .pwa-overlay-scroll {