miami-md

client/src/pages/products/Products.tsx

@@ -10,7 +10,7 @@ import PreviewCarouselAd from "../../assets/preview-carousel-ad.png";
 import PreviewCarouselGame from "../../assets/preview-carousel-game.jpg";
 
 import IconVideoAds from "../../assets/icon-video-ads.png";
-import PreviewVideoAd from "../../assets/preview-video-ad.png";
+import PreviewVideoAd from "../../assets/preview-video-ad.jpg";
 import PreviewVideoGame from "../../assets/preview-video-game.jpg";
 
 import IconGameController from "../../assets/icon-game-controller.png";

client/src/pages/products/ad-action/AdAction.module.css

@@ -1,5 +1,6 @@
 .closeButton {
   z-index: 10;
+  align-self: flex-end;
   border: 1px solid var(--bolt-border-primary);
   border-radius: 100vh;
   background: var(--bolt-surface-primary);
@@ -29,6 +30,9 @@
   height: 100%;
   border: none;
   display: block;
+}
+
+.iframeCheckout {
   background-color: var(--bolt-surface-primary);
 }
 

client/src/pages/products/ad-action/AdAction.tsx

@@ -92,7 +92,7 @@ export function AdAction({ url, label }: AdActionProps) {
           ref={iframeRef}
           src={url}
           className={localStyles.iframe}
-          sandbox="allow-scripts allow-same-origin allow-forms"
+          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
           title={label}
         />

client/src/pages/products/ad-action/CheckoutAction.tsx

@@ -90,7 +90,7 @@ export function CheckoutAction({ label }: AdActionProps) {
         {isModalOpen && (
           <iframe
             src={paymentUrl}
-            className={localStyles.iframe}
+            className={`${localStyles.iframe} ${localStyles.iframeCheckout}`}
             sandbox="allow-scripts allow-same-origin allow-forms"
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             title={label}

client/src/pages/products/ad-action/global-modal.module.css

@@ -3,7 +3,7 @@
 .globalModal {
   background: transparent;
   border-width: 0;
-  box-sizing: content-box;
+  box-sizing: border-box;
   flex-direction: column;
   max-height: 100dvh; /* override dialog defaults */
   max-width: 100dvw; /* override dialog defaults */
@@ -21,7 +21,7 @@
 
 .globalModal[open] {
   display: flex;
-  align-items: flex-end;
+  align-items: stretch;
   gap: var(--bolt-space-4);
 }