Fix booker top margin embed (#10357)

apps/web/pages/[user]/[type].tsx

@@ -2,25 +2,34 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { classNames } from "@calcom/lib";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import PageWrapper from "@components/PageWrapper";
 
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
-export default function Type({ slug, user, booking, away, isBrandingHidden, rescheduleUid, org }: PageProps) {
-  const isEmbed = typeof window !== "undefined" && window?.isEmbed?.();
+export default function Type({
+  slug,
+  user,
+  isEmbed,
+  booking,
+  away,
+  isBrandingHidden,
+  rescheduleUid,
+  org,
+}: PageProps) {
   return (
-    <main className={classNames("flex h-full items-center justify-center", !isEmbed && "min-h-[100dvh]")}>
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
         username={user}
         eventSlug={slug}

apps/web/pages/d/[link]/[slug].tsx

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
@@ -10,14 +11,24 @@ import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import PageWrapper from "@components/PageWrapper";
 
-type PageProps = inferSSRProps<typeof getServerSideProps>;
+type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
-export default function Type({ slug, user, booking, away, isBrandingHidden, isTeamEvent, org }: PageProps) {
+export default function Type({
+  slug,
+  isEmbed,
+  user,
+  booking,
+  away,
+  isBrandingHidden,
+  isTeamEvent,
+  org,
+}: PageProps) {
   return (
-    <main className="flex h-full min-h-[100dvh] items-center justify-center">
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
         username={user}
         eventSlug={slug}

apps/web/pages/team/[slug]/[type].tsx

@@ -2,24 +2,24 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { classNames } from "@calcom/lib";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import PageWrapper from "@components/PageWrapper";
 
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
-export default function Type({ slug, user, booking, away, isBrandingHidden, org }: PageProps) {
-  const isEmbed = typeof window !== "undefined" && window?.isEmbed?.();
+export default function Type({ slug, user, booking, away, isEmbed, isBrandingHidden, org }: PageProps) {
   return (
-    <main className={classNames("flex h-full items-center justify-center", !isEmbed && "min-h-[100dvh]")}>
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
         username={user}
         eventSlug={slug}

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

@@ -6,17 +6,20 @@ test.describe("Embed Pages", () => {
   test("Event Type Page: should not have margin top on embed page", async ({ page }) => {
     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(() => {
-      const mainElement = document.querySelector("main");
-      const divElement = mainElement?.querySelector("div");
+    const marginFromTop = await page.evaluate(async () => {
+      return await new Promise((resolve) => {
+        (function tryGettingBoundingRect() {
+          const mainElement = document.querySelector(".main");
 
-      if (mainElement && divElement) {
+          if (mainElement) {
             // This returns the distance of the div element from the viewport
-        const divRect = divElement.getBoundingClientRect();
-        return divRect.top;
+            const mainElBoundingRect = mainElement.getBoundingClientRect();
+            resolve(mainElBoundingRect.top);
+          } else {
+            setTimeout(tryGettingBoundingRect, 500);
           }
-
-      return null;
+        })();
+      });
     });
 
     expect(marginFromTop).toBe(0);

packages/features/bookings/Booker/Booker.tsx

@@ -183,9 +183,7 @@ const BookerComponent = ({
             (layout === BookerLayouts.MONTH_VIEW || isEmbed) && "border-subtle rounded-md border",
             !isEmbed && "sm:transition-[width] sm:duration-300",
             isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-booker sm:border-booker-width",
-            !isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-subtle",
-            // We don't want any margins for Embed. Any margin needed should be added by Embed user.
-            layout === BookerLayouts.MONTH_VIEW && isEmbed && "mt-0"
+            !isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-subtle"
           )}>
           <AnimatePresence>
             <BookerSection

packages/features/bookings/Booker/utils/getBookerWrapperClasses.ts

@@ -0,0 +1,6 @@
+import { classNames } from "@calcom/lib";
+
+export function getBookerWrapperClasses({ isEmbed }: { isEmbed: boolean }) {
+  // We don't want any margins for Embed. Any margin needed should be added by Embed user.
+  return classNames("flex h-full items-center justify-center", !isEmbed && "min-h-[100dvh]");
+}