From 3a293277618627268c183cf7471d562fe0bf010d Mon Sep 17 00:00:00 2001
From: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>
Date: Wed, 12 Feb 2025 16:15:47 +0530
Subject: [PATCH] fix: overlapping-dropdown-bookings-page (#19216)

---
 .../components/booking/BookingListItem.tsx    | 105 +++++++++---------
 apps/web/playwright/bookings-list.e2e.ts      |  18 +--
 2 files changed, 63 insertions(+), 60 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 4b713967ff..556f4f31ba 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -38,6 +38,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  DropdownMenuPortal,
   Icon,
   MeetingTimeInTimezones,
   showToast,
@@ -909,71 +910,73 @@ const Attendee = (attendeeProps: AttendeeProps & NoShowProps) => {
           onClick={(e) => e.stopPropagation()}
           className="radix-state-open:text-blue-500 transition hover:text-blue-500">
           {noShow ? (
-            <s>
+            <>
               {name || email} <Icon name="eye-off" className="inline h-4" />
-            </s>
+            </>
           ) : (
             <>{name || email}</>
           )}
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        {!isSmsCalEmail(email) && (
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          {!isSmsCalEmail(email) && (
+            <DropdownMenuItem className="focus:outline-none">
+              <DropdownItem
+                StartIcon="mail"
+                href={`mailto:${email}`}
+                onClick={(e) => {
+                  setOpenDropdown(false);
+                  e.stopPropagation();
+                }}>
+                <a href={`mailto:${email}`}>{t("email")}</a>
+              </DropdownItem>
+            </DropdownMenuItem>
+          )}
+
           <DropdownMenuItem className="focus:outline-none">
             <DropdownItem
-              StartIcon="mail"
-              href={`mailto:${email}`}
+              StartIcon={isCopied ? "clipboard-check" : "clipboard"}
               onClick={(e) => {
+                e.preventDefault();
+                const isEmailCopied = isSmsCalEmail(email);
+                copyToClipboard(isEmailCopied ? email : phoneNumber ?? "");
                 setOpenDropdown(false);
-                e.stopPropagation();
+                showToast(isEmailCopied ? t("email_copied") : t("phone_number_copied"), "success");
               }}>
-              <a href={`mailto:${email}`}>{t("email")}</a>
+              {!isCopied ? t("copy") : t("copied")}
             </DropdownItem>
           </DropdownMenuItem>
-        )}
 
-        <DropdownMenuItem className="focus:outline-none">
-          <DropdownItem
-            StartIcon={isCopied ? "clipboard-check" : "clipboard"}
-            onClick={(e) => {
-              e.preventDefault();
-              const isEmailCopied = isSmsCalEmail(email);
-              copyToClipboard(isEmailCopied ? email : phoneNumber ?? "");
-              setOpenDropdown(false);
-              showToast(isEmailCopied ? t("email_copied") : t("phone_number_copied"), "success");
-            }}>
-            {!isCopied ? t("copy") : t("copied")}
-          </DropdownItem>
-        </DropdownMenuItem>
-
-        {isBookingInPast && (
-          <DropdownMenuItem className="focus:outline-none">
-            {noShow ? (
-              <DropdownItem
-                data-testid="unmark-no-show"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setOpenDropdown(false);
-                  toggleNoShow({ attendee: { noShow: false, email }, bookingUid });
-                }}
-                StartIcon="eye">
-                {t("unmark_as_no_show")}
-              </DropdownItem>
-            ) : (
-              <DropdownItem
-                data-testid="mark-no-show"
-                onClick={(e) => {
-                  e.preventDefault();
-                  setOpenDropdown(false);
-                  toggleNoShow({ attendee: { noShow: true, email }, bookingUid });
-                }}
-                StartIcon="eye-off">
-                {t("mark_as_no_show")}
-              </DropdownItem>
-            )}
-          </DropdownMenuItem>
-        )}
-      </DropdownMenuContent>
+          {isBookingInPast && (
+            <DropdownMenuItem className="focus:outline-none">
+              {noShow ? (
+                <DropdownItem
+                  data-testid="unmark-no-show"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setOpenDropdown(false);
+                    toggleNoShow({ attendee: { noShow: false, email }, bookingUid });
+                  }}
+                  StartIcon="eye">
+                  {t("unmark_as_no_show")}
+                </DropdownItem>
+              ) : (
+                <DropdownItem
+                  data-testid="mark-no-show"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setOpenDropdown(false);
+                    toggleNoShow({ attendee: { noShow: true, email }, bookingUid });
+                  }}
+                  StartIcon="eye-off">
+                  {t("mark_as_no_show")}
+                </DropdownItem>
+              )}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
     </Dropdown>
   );
 };
diff --git a/apps/web/playwright/bookings-list.e2e.ts b/apps/web/playwright/bookings-list.e2e.ts
index 2960d0ebeb..6ee5ff75e4 100644
--- a/apps/web/playwright/bookings-list.e2e.ts
+++ b/apps/web/playwright/bookings-list.e2e.ts
@@ -90,12 +90,12 @@ test.describe("Bookings", () => {
       const titleAndAttendees = firstPastBooking.locator('[data-testid="title-and-attendees"]');
       const firstGuest = firstPastBooking.locator('[data-testid="guest"]').nth(0);
       await firstGuest.click();
-      await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeHidden();
-      await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeVisible();
-      await titleAndAttendees.locator('[data-testid="mark-no-show"]').click();
+      await expect(page.locator('[data-testid="unmark-no-show"]')).toBeHidden();
+      await expect(page.locator('[data-testid="mark-no-show"]')).toBeVisible();
+      await page.locator('[data-testid="mark-no-show"]').click();
       await firstGuest.click();
-      await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeVisible();
-      await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeHidden();
+      await expect(page.locator('[data-testid="unmark-no-show"]')).toBeVisible();
+      await expect(page.locator('[data-testid="mark-no-show"]')).toBeHidden();
       await webhookReceiver.waitForRequestCount(1);
       const [request] = webhookReceiver.requestList;
       const body = request.body;
@@ -181,11 +181,11 @@ test.describe("Bookings", () => {
       const titleAndAttendees = firstPastBooking.locator('[data-testid="title-and-attendees"]');
       const firstGuest = firstPastBooking.locator('[data-testid="guest"]').nth(0);
       await firstGuest.click();
-      await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeVisible();
-      await titleAndAttendees.locator('[data-testid="mark-no-show"]').click();
+      await expect(page.locator('[data-testid="mark-no-show"]')).toBeVisible();
+      await page.locator('[data-testid="mark-no-show"]').click();
       await firstGuest.click();
-      await expect(titleAndAttendees.locator('[data-testid="unmark-no-show"]')).toBeVisible();
-      await expect(titleAndAttendees.locator('[data-testid="mark-no-show"]')).toBeHidden();
+      await expect(page.locator('[data-testid="unmark-no-show"]')).toBeVisible();
+      await expect(page.locator('[data-testid="mark-no-show"]')).toBeHidden();
       await webhookReceiver.waitForRequestCount(1);
       const [request] = webhookReceiver.requestList;
       const body = request.body;