fixed booking page padding (#5009)

apps/web/components/booking/AvailableTimes.tsx

@@ -57,7 +57,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
           {date.toDate().toLocaleString(i18n.language, { month: "long" })}
         </span>
       </div>
-      <div className="grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
+      <div className="-mb-5 grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
         {slots.length > 0 &&
           slots.map((slot) => {
             type BookingURL = {

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -401,7 +401,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
       <div>
         <main
           className={classNames(
-            "flex flex-col",
+            "flex-col md:mx-4 lg:flex",
             shouldAlignCentrally ? "items-center" : "items-start",
             !isEmbed && classNames("mx-auto my-0 ease-in-out md:my-24")
           )}>
@@ -412,7 +412,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                 isBackgroundTransparent
                   ? ""
                   : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
-                "border-bookinglightest overflow-hidden rounded-md md:border",
+                "border-bookinglightest overflow-hidden md:rounded-md md:border",
                 isEmbed && "mx-auto"
               )}>
               <div className="overflow-hidden md:flex">

packages/ui/v2/modules/booker/DatePicker.tsx

@@ -54,7 +54,11 @@ export const Day = ({
       data-disabled={props.disabled}
       {...props}>
       {date.date()}
-      {date.isToday() && <span className="absolute left-0 bottom-0 mx-auto -mb-px w-full text-4xl">.</span>}
+      {date.isToday() && (
+        <span className="absolute left-0 bottom-0 mx-auto -mb-px w-full text-4xl md:-bottom-1 lg:bottom-0">
+          .
+        </span>
+      )}
     </button>
   );
 };