fix: margin top in booker embed (#15412)

Author: hariombalhara

packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts

@@ -10,22 +10,28 @@ test.describe("Embed Pages", () => {
     await page.goto("http://localhost:3000/free/30min/embed");
     // Checks the margin from top by checking the distance between the div inside main from the viewport
     const marginFromTop = await page.evaluate(async () => {
-      return await new Promise((resolve) => {
+      return await new Promise<{
+        bookerContainer: number;
+        mainEl: number;
+      }>((resolve) => {
         (function tryGettingBoundingRect() {
           const mainElement = document.querySelector(".main");
+          const bookerContainer = document.querySelector('[data-testid="booker-container"]');
 
-          if (mainElement) {
+          if (mainElement && bookerContainer) {
             // This returns the distance of the div element from the viewport
             const mainElBoundingRect = mainElement.getBoundingClientRect();
-            resolve(mainElBoundingRect.top);
+            const bookerContainerBoundingRect = bookerContainer.getBoundingClientRect();
+            resolve({ bookerContainer: bookerContainerBoundingRect.top, mainEl: mainElBoundingRect.top });
           } else {
             setTimeout(tryGettingBoundingRect, 500);
           }
         })();
       });
     });
 
-    expect(marginFromTop).toBe(0);
+    expect(marginFromTop.bookerContainer).toBe(0);
+    expect(marginFromTop.mainEl).toBe(0);
   });
 
   test("Event Type Page: should have margin top on non embed page", async ({ page }) => {

packages/features/bookings/Booker/Booker.tsx

@@ -268,9 +268,12 @@ const BookerComponent = ({
         )}>
         <div
           ref={animationScope}
+          data-testid="booker-container"
           className={classNames(
             ...getBookerSizeClassNames(layout, bookerState, hideEventTypeDetails),
-            `bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:mt-16 md:flex-row`,
+            `bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row`,
+            // We can't let embed have margin from top because for inline embed user wouldn't want that extra space at the top
+            !isEmbed ? "md:mt-16" : "",
             // We remove border only when the content covers entire viewport. Because in embed, it can almost never be the case that it covers entire viewport, we show the border there
             (layout === BookerLayouts.MONTH_VIEW || isEmbed) && "border-subtle rounded-md",
             !isEmbed && "sm:transition-[width] sm:duration-300",