fix: better manage iframe margin

commercelayer · Dec 18, 2024 · 052fab1 · 052fab1
1 parent 8c70f74
commit 052fab1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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>