From 052fab10c586bf4d6c70ed1a76c134858c067254 Mon Sep 17 00:00:00 2001
From: Marco Montalbano <marco.montalbano@commercelayer.io>
Date: Wed, 18 Dec 2024 10:28:35 +0100
Subject: [PATCH] fix: better manage iframe margin

---
 packages/drop-in/src/components/cl-cart/cl-cart.spec.tsx | 6 +++---
 packages/drop-in/src/components/cl-cart/cl-cart.tsx      | 7 +++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/drop-in/src/components/cl-cart/cl-cart.spec.tsx b/packages/drop-in/src/components/cl-cart/cl-cart.spec.tsx
index 759fdcc9..0a3bd3ed 100644
--- a/packages/drop-in/src/components/cl-cart/cl-cart.spec.tsx
+++ b/packages/drop-in/src/components/cl-cart/cl-cart.spec.tsx
@@ -36,7 +36,7 @@ describe('cl-cart.spec', () => {
               id="iFrameResizer0"
               allow="payment"
               src="https://example.com/checkout-url"
-              style="width: 1px; min-width: 100%; min-height: 100%; border: none; overflow: hidden;"
+              style="width: 1px; min-width: calc(100% - 40px); min-height: 100%; border: none; margin: 20px; overflow: hidden;"
             ></iframe>
           </div>
         </mock:shadow-root>
@@ -70,7 +70,7 @@ describe('cl-cart.spec', () => {
                 title="My Cart"
                 id="iFrameResizer1"
                 allow="payment"
-                style="width: 1px; min-width: 100%; min-height: 100%; border: none; overflow: hidden;"
+                style="width: 1px; min-width: calc(100% - 40px); min-height: 100%; border: none; margin: 20px; overflow: hidden;"
               ></iframe>
             </div>
           </mock:shadow-root>
@@ -93,7 +93,7 @@ describe('cl-cart.spec', () => {
                 id="iFrameResizer1"
                 allow="payment"
                 src="https://example.com/checkout-url"
-                style="width: 1px; min-width: 100%; min-height: 100%; border: none; overflow: hidden;"
+                style="width: 1px; min-width: calc(100% - 40px); min-height: 100%; border: none; margin: 20px; overflow: hidden;"
               ></iframe>
             </div>
           </mock:shadow-root>
diff --git a/packages/drop-in/src/components/cl-cart/cl-cart.tsx b/packages/drop-in/src/components/cl-cart/cl-cart.tsx
index 412574d4..31b9c33e 100644
--- a/packages/drop-in/src/components/cl-cart/cl-cart.tsx
+++ b/packages/drop-in/src/components/cl-cart/cl-cart.tsx
@@ -227,8 +227,6 @@ export class ClCart {
       {
         checkOrigin: false,
 
-        bodyPadding: '20px',
-
         // 'messageCallback' has been renamed 'onMessage'. The old method will be removed in the next major version.
         // @ts-expect-error We are using the latest version for 'iframe-resized' but unfortunately types are not updated.
         onMessage
@@ -273,9 +271,10 @@ export class ClCart {
             src={this.href}
             style={{
               width: '1px',
-              'min-width': '100%',
+              'min-width': 'calc(100% - 40px)',
               'min-height': '100%',
-              border: 'none'
+              border: 'none',
+              margin: '20px'
             }}
           ></iframe>
         </div>