Tweaks to booker grid sizing to prevent buttons from overflow booker wrapper in Safari (#9620)

packages/features/bookings/Booker/Booker.tsx

@@ -139,12 +139,12 @@ const BookerComponent = ({
             <StickyOnDesktop
               key="meta"
               className={classNames(
-                "relative z-10 flex",
+                "relative z-10 flex [grid-area:meta]",
                 layout !== BookerLayouts.MONTH_VIEW && "sm:min-h-screen"
               )}>
               <BookerSection
                 area="meta"
-                className="max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
+                className="max-w-screen flex h-full w-full flex-col md:w-[var(--booker-meta-width)]">
                 <EventMeta />
                 {layout !== BookerLayouts.MONTH_VIEW &&
                   !(layout === "mobile" && bookerState === "booking") && (

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

@@ -73,7 +73,7 @@ export const AvailableTimeSlots = ({ extraDays, limitHeight, seatsPerTimeslot }:
     <div
       className={classNames(
         limitHeight && "flex-grow md:h-[400px]",
-        !limitHeight && "flex w-full flex-row gap-4"
+        !limitHeight && "flex h-full w-full flex-row gap-4"
       )}>
       {schedule.isLoading
         ? // Shows exact amount of days as skeleton.

packages/features/bookings/Booker/config.ts

@@ -70,7 +70,7 @@ export const resizeAnimationConfig: ResizeAnimationConfig = {
       "meta main main"
       `,
       gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width)",
-      gridTemplateRows: "auto",
+      gridTemplateRows: "1fr 0fr",
     },
     selecting_time: {
       width: "calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width))",
@@ -81,7 +81,7 @@ export const resizeAnimationConfig: ResizeAnimationConfig = {
       "meta main timeslots"
       `,
       gridTemplateColumns: "var(--booker-meta-width) 1fr var(--booker-timeslots-width)",
-      gridTemplateRows: "auto",
+      gridTemplateRows: "1fr 0fr",
     },
   },
   week_view: {