BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile dialog and overlay panel positioning

Browse Source 
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.
This commit is contained in:
Bohdan Triapitsyn
2026-06-02 20:26:48 +03:00
parent b692c44562
commit 7adbaca797
2 changed files with 4 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/ui/MobileOverlayPanel.tsx
+3 -3
View File
@@ -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 ? (
packages/ui/src/styles/mobile.css
+1 -13
View File
@@ -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 {