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

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);