fix: Time Buttons Should be Scroll not the Whole Right Side (#11412)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

packages/features/bookings/Booker/Booker.tsx

@@ -316,7 +316,7 @@ const BookerComponent = ({
               className={classNames(
                 "border-subtle rtl:border-default flex h-full w-full flex-col overflow-x-auto px-5 py-3 pb-0 rtl:border-r ltr:md:border-l",
                 layout === BookerLayouts.MONTH_VIEW &&
-                  "scroll-bar h-full overflow-auto md:w-[var(--booker-timeslots-width)]",
+                  "h-full overflow-hidden md:w-[var(--booker-timeslots-width)]",
                 layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
               )}
               ref={timeslotsRef}

packages/features/bookings/Booker/components/AvailableTimeSlots.tsx

@@ -10,6 +10,7 @@ import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc";
 
+import { AvailableTimesHeader } from "../../components/AvailableTimesHeader";
 import { useBookerStore } from "../store";
 import { useEvent, useScheduleForEvent } from "../utils/event";
 
@@ -100,33 +101,47 @@ export const AvailableTimeSlots = ({
   }, [containerRef, schedule.isLoading, isEmbed, isMobile]);
 
   return (
-    <div
-      ref={containerRef}
-      className={classNames(
-        limitHeight && "flex-grow md:h-[400px]",
-        !limitHeight && "flex h-full w-full flex-row gap-4"
-      )}>
-      {schedule.isLoading
-        ? // Shows exact amount of days as skeleton.
-          Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
-        : slotsPerDay.length > 0 &&
-          slotsPerDay.map((slots) => (
-            <AvailableTimes
-              className="w-full"
-              key={slots.date}
-              showTimeFormatToggle={!isColumnView}
-              onTimeSelect={onTimeSelect}
-              date={dayjs(slots.date)}
-              slots={slots.slots}
-              seatsPerTimeSlot={seatsPerTimeSlot}
-              showAvailableSeatsCount={showAvailableSeatsCount}
-              availableMonth={
-                dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
-                  ? dayjs(slots.date).format("MMM")
-                  : undefined
-              }
-            />
-          ))}
-    </div>
+    <>
+      <div className="flex">
+        {schedule.isLoading
+          ? // Shows exact amount of days as skeleton.
+            Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
+          : slotsPerDay.length > 0 &&
+            slotsPerDay.map((slots) => (
+              <AvailableTimesHeader
+                key={slots.date}
+                date={dayjs(slots.date)}
+                showTimeFormatToggle={!isColumnView}
+                availableMonth={
+                  dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
+                    ? dayjs(slots.date).format("MMM")
+                    : undefined
+                }
+              />
+            ))}
+      </div>
+      <div
+        ref={containerRef}
+        className={classNames(
+          limitHeight && "scroll-bar flex-grow overflow-auto md:h-[400px]",
+          !limitHeight && "flex h-full w-full flex-row gap-4"
+        )}>
+        {schedule.isLoading
+          ? // Shows exact amount of days as skeleton.
+            Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
+          : slotsPerDay.length > 0 &&
+            slotsPerDay.map((slots) => (
+              <AvailableTimes
+                className="scroll-bar w-full overflow-auto"
+                key={slots.date}
+                showTimeFormatToggle={!isColumnView}
+                onTimeSelect={onTimeSelect}
+                slots={slots.slots}
+                seatsPerTimeSlot={seatsPerTimeSlot}
+                showAvailableSeatsCount={showAvailableSeatsCount}
+              />
+            ))}
+      </div>
+    </>
   );
 };

packages/features/bookings/components/AvailableTimes.tsx

@@ -1,22 +1,16 @@
 import { CalendarX2 } from "lucide-react";
-import { shallow } from "zustand/shallow";
 
-import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import type { Slots } from "@calcom/features/schedules";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { nameOfDay } from "@calcom/lib/weekday";
-import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import { Button, SkeletonText } from "@calcom/ui";
 
 import { useBookerStore } from "../Booker/store";
 import { useTimePreferences } from "../lib";
 import { SeatsAvailabilityText } from "./SeatsAvailabilityText";
-import { TimeFormatToggle } from "./TimeFormatToggle";
 
 type AvailableTimesProps = {
-  date: Dayjs;
   slots: Slots[string];
   onTimeSelect: (
     time: string,
@@ -28,58 +22,25 @@ type AvailableTimesProps = {
   showAvailableSeatsCount?: boolean | null;
   showTimeFormatToggle?: boolean;
   className?: string;
-  availableMonth?: string | undefined;
   selectedSlots?: string[];
 };
 
 export const AvailableTimes = ({
-  date,
   slots,
   onTimeSelect,
   seatsPerTimeSlot,
   showAvailableSeatsCount,
   showTimeFormatToggle = true,
   className,
-  availableMonth,
   selectedSlots,
 }: AvailableTimesProps) => {
   const { t, i18n } = useLocale();
   const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
   const bookingData = useBookerStore((state) => state.bookingData);
   const hasTimeSlots = !!seatsPerTimeSlot;
-  const [layout] = useBookerStore((state) => [state.layout], shallow);
-  const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
-  const isMonthView = layout === BookerLayouts.MONTH_VIEW;
-  const isToday = dayjs().isSame(date, "day");
 
   return (
     <div className={classNames("text-default flex flex-col", className)}>
-      <header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium">
-        <span
-          className={classNames(
-            isColumnView && "w-full text-center",
-            isColumnView ? "text-subtle text-xs uppercase" : "text-emphasis font-semibold"
-          )}>
-          <span className={classNames(isToday && "!text-default")}>
-            {nameOfDay(i18n.language, Number(date.format("d")), "short")}
-          </span>
-          <span
-            className={classNames(
-              isColumnView && isToday && "bg-brand-default text-brand ml-2",
-              "inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
-              isMonthView ? "text-default text-sm" : "text-xs"
-            )}>
-            {date.format("DD")}
-            {availableMonth && `, ${availableMonth}`}
-          </span>
-        </span>
-
-        {showTimeFormatToggle && (
-          <div className="ml-auto rtl:mr-auto">
-            <TimeFormatToggle />
-          </div>
-        )}
-      </header>
       <div className="h-full pb-4">
         {!slots.length && (
           <div className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">

packages/features/bookings/components/AvailableTimesHeader.tsx

@@ -0,0 +1,60 @@
+import { shallow } from "zustand/shallow";
+
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { nameOfDay } from "@calcom/lib/weekday";
+import { BookerLayouts } from "@calcom/prisma/zod-utils";
+
+import { useBookerStore } from "../Booker/store";
+import { TimeFormatToggle } from "./TimeFormatToggle";
+
+type AvailableTimesHeaderProps = {
+  date: Dayjs;
+  showTimeFormatToggle?: boolean;
+  availableMonth?: string | undefined;
+};
+
+export const AvailableTimesHeader = ({
+  date,
+
+  showTimeFormatToggle = true,
+
+  availableMonth,
+}: AvailableTimesHeaderProps) => {
+  const { t, i18n } = useLocale();
+  const [layout] = useBookerStore((state) => [state.layout], shallow);
+  const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
+  const isMonthView = layout === BookerLayouts.MONTH_VIEW;
+  const isToday = dayjs().isSame(date, "day");
+
+  return (
+    <header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium">
+      <span
+        className={classNames(
+          isColumnView && "w-full text-center",
+          isColumnView ? "text-subtle text-xs uppercase" : "text-emphasis font-semibold"
+        )}>
+        <span className={classNames(isToday && "!text-default")}>
+          {nameOfDay(i18n.language, Number(date.format("d")), "short")}
+        </span>
+        <span
+          className={classNames(
+            isColumnView && isToday && "bg-brand-default text-brand ml-2",
+            "inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
+            isMonthView ? "text-default text-sm" : "text-xs"
+          )}>
+          {date.format("DD")}
+          {availableMonth && `, ${availableMonth}`}
+        </span>
+      </span>
+
+      {showTimeFormatToggle && (
+        <div className="ml-auto rtl:mr-auto">
+          <TimeFormatToggle />
+        </div>
+      )}
+    </header>
+  );
+};

packages/features/bookings/index.ts

@@ -6,3 +6,4 @@ export {
   EventTitle,
 } from "./components/event-meta";
 export { AvailableTimes, AvailableTimesSkeleton } from "./components/AvailableTimes";
+export { AvailableTimesHeader } from "./components/AvailableTimesHeader";

packages/features/embed/Embed.tsx

@@ -10,6 +10,7 @@ import { shallow } from "zustand/shallow";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
+import { AvailableTimesHeader } from "@calcom/features/bookings";
 import { AvailableTimes } from "@calcom/features/bookings";
 import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
@@ -248,9 +249,9 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
         <div className="mt-[9px] font-medium ">
           {selectedDate ? (
             <div className="flex h-full w-full flex-row gap-4">
+              <AvailableTimesHeader date={dayjs(selectedDate)} />
               <AvailableTimes
                 className="w-full"
-                date={dayjs(selectedDate)}
                 selectedSlots={
                   eventType.slug &&
                   selectedDatesAndTimes &&