From 07399974ceda4da145c242973d4622773e2da964 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Sat, 4 Mar 2023 21:41:04 +0530
Subject: [PATCH] Small Embed Fixes (#7513)

* Fix bg beyond rounded border in embed

* Consider margin as well for mainElement height

* Fix loader positioning

* Give better name to embed artifacts

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 .github/workflows/e2e-embed.yml                     |  4 ++--
 packages/embeds/embed-core/src/Inline/inlineHtml.ts |  4 ++--
 packages/embeds/embed-core/src/embed-iframe.ts      | 11 +++++++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/e2e-embed.yml b/.github/workflows/e2e-embed.yml
index 60090d5ee2..e8aca6b237 100644
--- a/.github/workflows/e2e-embed.yml
+++ b/.github/workflows/e2e-embed.yml
@@ -32,12 +32,12 @@ jobs:
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-core
+          name: test-results-embed-core
           path: packages/embeds/embed-core/playwright/results
 
       - name: Upload embed-react results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-react
+          name: test-results-embed-react
           path: packages/embeds/embed-react/playwright/results
diff --git a/packages/embeds/embed-core/src/Inline/inlineHtml.ts b/packages/embeds/embed-core/src/Inline/inlineHtml.ts
index 740a25dda7..a082140285 100644
--- a/packages/embeds/embed-core/src/Inline/inlineHtml.ts
+++ b/packages/embeds/embed-core/src/Inline/inlineHtml.ts
@@ -1,5 +1,5 @@
-const html = `<div id="wrapper" style="top:50%; left:50%" class="absolute z-highest">
-<div style="transform:translate(-50%,-50%)"  class="loader border-brand dark:border-darkmodebrand">
+const html = `<div id="wrapper" style="top:50%; left:50%;transform:translate(-50%,-50%)" class="absolute z-highest">
+<div class="loader border-brand dark:border-darkmodebrand">
 	<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
 </div>
 <div id="error" style="transform:translate(-50%,-50%)" class="hidden">
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index fa088e0107..28158e0ad2 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -340,8 +340,15 @@ function keepParentInformedAboutDimensionChanges() {
       throw new Error("Main element should be an HTMLElement");
     }
 
-    const contentHeight = mainElement.offsetHeight;
-    const contentWidth = mainElement.offsetWidth;
+    const mainElementStyles = getComputedStyle(mainElement);
+    const contentHeight =
+      mainElement.offsetHeight +
+      parseInt(mainElementStyles.marginTop) +
+      parseInt(mainElementStyles.marginBottom);
+    const contentWidth =
+      mainElement.offsetWidth +
+      parseInt(mainElementStyles.marginLeft) +
+      parseInt(mainElementStyles.marginRight);
 
     // During first render let iframe tell parent that how much is the expected height to avoid scroll.
     // Parent would set the same value as the height of iframe which would prevent scroll.