From 648dd862f59de3e393ad4db39bff4ede8aa26869 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Mon, 19 Jun 2023 12:34:49 +0200
Subject: [PATCH] Tweaks to booker grid sizing to prevent buttons from overflow
 booker wrapper in Safari (#9620)

---
 packages/features/bookings/Booker/Booker.tsx                  | 4 ++--
 .../bookings/Booker/components/AvailableTimeSlots.tsx         | 2 +-
 packages/features/bookings/Booker/config.ts                   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 02e62f08ab..03cd291085 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/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") && (
diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
index 19ac44f9b9..8ce188d154 100644
--- a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
+++ b/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.
diff --git a/packages/features/bookings/Booker/config.ts b/packages/features/bookings/Booker/config.ts
index 9c19bdd313..4c78e0ab20 100644
--- a/packages/features/bookings/Booker/config.ts
+++ b/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: {