From 45250f6f3eb46ebbde2773f9ef3e6ecd6596941b Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Thu, 4 May 2023 12:32:22 +0100
Subject: [PATCH] CAL-1558: Fixed responsiveness of booker for small calendar
 layout (#8660)

* CAL-1558: Fixed responsiveness of booker for small calendar layout

* Remove commented code
---
 packages/features/bookings/Booker/Booker.tsx | 16 +++++++++++-----
 packages/features/bookings/Booker/config.ts  |  5 +++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index d9089e03c8..e4145236b0 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -121,13 +121,19 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book
         <div
           style={resizeAnimationConfig[layout]?.[bookerState] || resizeAnimationConfig[layout].default}
           className={classNames(
+            // Size settings are abstracted on their own lines purely for readbility.
+            // General sizes:
             "[--booker-main-width:480px] [--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px]",
-            "bg-muted grid max-w-full items-start overflow-clip dark:[color-scheme:dark] md:flex-row",
+            // Sizes only applicable for small_calendar
             layout === "small_calendar" &&
-              "border-subtle mt-20 min-h-[450px] w-[calc(var(--booker-meta-width)+var(--booker-main-width))] rounded-md border [--booker-meta-width:280px]",
-            layout !== "small_calendar" &&
-              "h-auto min-h-screen w-screen [--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
-            "transition-[width] duration-300"
+              "w-[calc(var(--booker-meta-width)+var(--booker-main-width))] [--booker-meta-width:240px] lg:[--booker-meta-width:280px]",
+            // Sizes for fullscreen layouts:
+            layout !== "small_calendar" && "[--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
+            // Other styles
+            "bg-muted grid max-w-full items-start overflow-clip dark:[color-scheme:dark] md:flex-row",
+            layout === "small_calendar" && "border-subtle mt-20 min-h-[450px] rounded-md border",
+            layout !== "small_calendar" && "h-auto min-h-screen w-screen",
+            "transition-[width,max-width] duration-300"
           )}>
           <AnimatePresence>
             <StickyOnDesktop key="meta" className="relative z-10">
diff --git a/packages/features/bookings/Booker/config.ts b/packages/features/bookings/Booker/config.ts
index 595013db28..f77fd0ecbe 100644
--- a/packages/features/bookings/Booker/config.ts
+++ b/packages/features/bookings/Booker/config.ts
@@ -58,9 +58,10 @@ export const resizeAnimationConfig: ResizeAnimationConfig = {
       gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width)",
     },
     selecting_time: {
-      width: "calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width))",
+      width: "100%",
+      maxWidth: "calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width))",
       gridTemplateAreas: `"meta main timeslots"`,
-      gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width) var(--booker-timeslots-width)",
+      gridTemplateColumns: "var(--booker-meta-width) 1fr var(--booker-timeslots-width)",
     },
   },
   large_calendar: {