From 4cc01bb9f424609451c62fb62f0774343d1fc4d2 Mon Sep 17 00:00:00 2001 From: chenhang Date: Mon, 29 Jun 2026 19:20:50 +0800 Subject: [PATCH] fix(stripe-dialog): adjust overlay display and padding for better responsiveness --- .../stripe-payment-dialog.module.css | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/app/subscription/components/stripe-payment-dialog.module.css b/src/app/subscription/components/stripe-payment-dialog.module.css index 2cd64a18..bf09a585 100644 --- a/src/app/subscription/components/stripe-payment-dialog.module.css +++ b/src/app/subscription/components/stripe-payment-dialog.module.css @@ -2,17 +2,26 @@ position: fixed; inset: 0; z-index: 70; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; + display: block; + height: 100dvh; + padding: + max(24px, env(safe-area-inset-top)) + 20px + max(20px, env(safe-area-inset-bottom)); + overflow-y: auto; background: rgba(0, 0, 0, 0.5); + overscroll-behavior: contain; } .dialog { width: 100%; max-width: 420px; - max-height: calc(100vh - 40px); + max-height: calc( + 100dvh + - max(48px, env(safe-area-inset-top)) + - max(20px, env(safe-area-inset-bottom)) + ); + margin: clamp(0px, 6dvh, 48px) auto 0; overflow-y: auto; border-radius: 32px; background: var(--color-page-background, #ffffff);