From 5e60654aa998d99c0f6c5faf311417c33d429ee2 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 30 Jan 2024 16:48:08 +0800
Subject: [PATCH] fix: make show more banner static > absolute to allow embed
 auto height (#13457)

* fix: make show more banner static > abosulte to allow embed auto height

* fix: hide on mobile
---
 packages/features/bookings/Booker/Booker.tsx  | 20 +++++++++----------
 .../components/HavingTroubleFindingTime.tsx   |  5 ++++-
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 13776c5dee..0178edadcb 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -435,16 +435,7 @@ const BookerComponent = ({
               {...fadeInLeft}
               initial="visible"
               className="md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]">
-              <div className="relative">
-                <HavingTroubleFindingTime
-                  dayCount={dayCount}
-                  isScheduleLoading={schedule.isLoading}
-                  onButtonClick={() => {
-                    setDayCount(null);
-                  }}
-                />
-                <DatePicker event={event} schedule={schedule} />
-              </div>
+              <DatePicker event={event} schedule={schedule} />
             </BookerSection>
 
             <BookerSection
@@ -483,6 +474,15 @@ const BookerComponent = ({
           </AnimatePresence>
         </div>
 
+        <HavingTroubleFindingTime
+          visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW && !isMobile}
+          dayCount={dayCount}
+          isScheduleLoading={schedule.isLoading}
+          onButtonClick={() => {
+            setDayCount(null);
+          }}
+        />
+
         <m.span
           key="logo"
           className={classNames(
diff --git a/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx b/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
index 4f1f46ce24..de2fe1db0a 100644
--- a/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
+++ b/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
@@ -7,12 +7,15 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 type Props = {
   onButtonClick: () => void;
   dayCount: number | null;
+  visible: boolean;
   isScheduleLoading: boolean;
 };
 export function HavingTroubleFindingTime(props: Props) {
   const { t } = useLocale();
   const [internalClick, setInternalClick] = useState(false);
 
+  if (!props.visible) return null;
+
   // Easiest way to detect if its not enabled
   if (
     (process.env.NEXT_PUBLIC_BOOKER_NUMBER_OF_DAYS_TO_LOAD == "0" && BOOKER_NUMBER_OF_DAYS_TO_LOAD == 0) ||
@@ -25,7 +28,7 @@ export function HavingTroubleFindingTime(props: Props) {
   if (props.isScheduleLoading || !props.dayCount) return null;
 
   return (
-    <div className="bg-default border-subtle absolute bottom-[-120px] flex w-full min-w-0 items-center justify-between rounded-[32px] border p-3 text-sm leading-none shadow-sm">
+    <div className="bg-default border-subtle mt-6 flex w-1/2 min-w-0 items-center justify-between rounded-[32px] border p-3 text-sm leading-none shadow-sm lg:w-1/3">
       <div className="flex items-center gap-2 overflow-x-hidden">
         <InfoIcon className="text-default h-4 w-4" />
         <p className="w-full  leading-none">{t("having_trouble_finding_time")}</p>