banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(stripe-dialog): adjust overlay display and padding for better responsiveness

Browse Source
This commit is contained in:
chenhang
2026-06-29 19:20:50 +08:00
parent 7252586c9e
commit 4cc01bb9f4
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/subscription/components/stripe-payment-dialog.module.css
+14 -5
View File
@@ -2,17 +2,26 @@
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 70; z-index: 70;
display: flex; display: block;
align-items: center; height: 100dvh;
justify-content: center; padding:
padding: 20px; 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); background: rgba(0, 0, 0, 0.5);
overscroll-behavior: contain;
} }
.dialog { .dialog {
width: 100%; width: 100%;
max-width: 420px; 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; overflow-y: auto;
border-radius: 32px; border-radius: 32px;
background: var(--color-page-background, #ffffff); background: var(--color-page-background, #ffffff);