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

@@ -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(

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>