fix(payment): portal checkout dialogs to viewport

(cherry picked from commit 67f292353e)

src/app/subscription/components/__tests__/tailwind-components.test.tsx

@@ -1,7 +1,7 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
-import { StripePaymentDialog } from "@/app/_components/payment/stripe-payment-dialog";
+import { stripePaymentDialogStyles } from "@/app/_components/payment/stripe-payment-dialog.styles";
 
 import { SubscriptionCtaButton } from "../subscription-cta-button";
 import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
@@ -48,19 +48,16 @@ describe("subscription Tailwind components", () => {
     expect(html).toContain("OK");
   });
 
-  it("renders StripePaymentDialog fallback with Tailwind dialog utilities", () => {
-    const html = renderToStaticMarkup(
-      <StripePaymentDialog
-        clientSecret="client-secret"
-        onClose={() => undefined}
-      />,
+  it("keeps Stripe dialog viewport and panel utilities", () => {
+    expect(stripePaymentDialogStyles.overlay).toContain("fixed inset-0");
+    expect(stripePaymentDialogStyles.dialog).toContain(
+      "max-w-(--dialog-wide-max-width,420px)",
+    );
+    expect(stripePaymentDialogStyles.dialog).toContain("overflow-y-auto");
+    expect(stripePaymentDialogStyles.dialog).toContain("overscroll-contain");
+    expect(stripePaymentDialogStyles.primary).toContain(
+      "bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)",
     );
-
-    expect(html).toContain('role="alertdialog"');
-    expect(html).toContain("fixed inset-0");
-    expect(html).toContain("max-w-(--dialog-wide-max-width,420px)");
-    expect(html).toContain("Payment unavailable");
-    expect(html).toContain("bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)");
   });
 
   it("renders most popular badges for VIP and coin plans", () => {