From ae541e4c37e2552d47204fc571d9ae1a494bca67 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Mon, 19 Dec 2022 19:56:34 +0100
Subject: [PATCH] /bookings: only show timezone popover on hover (#6112)

---
 apps/web/components/booking/BookingListItem.tsx | 2 +-
 packages/ui/v2/core/MeetingTimeInTimezones.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 5682599a14..b8f77ac56f 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -248,7 +248,7 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="flex flex-col hover:bg-neutral-50 sm:flex-row">
+      <tr className="group flex flex-col hover:bg-neutral-50 sm:flex-row">
         <td
           className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
           onClick={onClickTableData}>
diff --git a/packages/ui/v2/core/MeetingTimeInTimezones.tsx b/packages/ui/v2/core/MeetingTimeInTimezones.tsx
index cb85b18fee..7699a23791 100644
--- a/packages/ui/v2/core/MeetingTimeInTimezones.tsx
+++ b/packages/ui/v2/core/MeetingTimeInTimezones.tsx
@@ -54,14 +54,14 @@ const MeetingTimeInTimezones = ({
     <Popover.Root>
       <Popover.Trigger
         onClick={preventBubbling}
-        className="popover-button ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm text-gray-900 transition-colors hover:bg-gray-200 focus:bg-gray-200">
+        className="popover-button invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm text-gray-900 transition-colors hover:bg-gray-200 focus:bg-gray-200 group-hover:visible">
         <Icon.FiGlobe />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
           onClick={preventBubbling}
           side="top"
-          className="popover-content slideInBottom shadow-dropdown border-5 bg-brand-500 rounded-md border-gray-200 p-3 text-sm text-white shadow-sm">
+          className="popover-content slideInBottom border-5 bg-brand-500 rounded-md border-gray-200 p-3 text-sm text-white shadow-sm">
           {times.map((time) => (
             <span className="mt-2 block first:mt-0" key={time.timezone}>
               <span className="inline-flex align-baseline">