From 692a84a86ea06bac4ef34f7a15c91586777d3fc5 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Fri, 16 Dec 2022 12:46:15 +0000
Subject: [PATCH] Fixes the start and end time mobile view (#6057)

---
 apps/web/pages/availability/[schedule].tsx    | 124 +++++++++---------
 .../schedules/components/Schedule.tsx         |   7 +-
 2 files changed, 63 insertions(+), 68 deletions(-)

diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 20d7eabd09..890a1e3cd7 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -174,74 +174,70 @@ export default function Availability({ schedule }: { schedule: number }) {
           </Button>
         </div>
       }>
-      <div className="flex items-baseline sm:mt-0">
-        {/* TODO: Find a better way to guarantee alignment, but for now this'll do. */}
-        <Icon.FiArrowLeft className=" mr-3 text-transparent hover:cursor-pointer" />
-        <div className="w-full">
-          <Form
-            form={form}
-            id="availability-form"
-            handleSubmit={async ({ dateOverrides, ...values }) => {
-              updateMutation.mutate({
-                scheduleId: schedule,
-                dateOverrides: dateOverrides.flatMap((override) => override.ranges),
-                ...values,
-              });
-            }}
-            className="-mx-4 flex flex-col pb-16 sm:mx-0 xl:flex-row xl:space-x-6">
-            <div className="flex-1 divide-y divide-neutral-200 rounded-md border">
-              <div className=" py-5 pr-4 sm:p-6">
-                <h3 className="mb-5 text-base font-medium leading-6 text-gray-900">
-                  {t("change_start_end")}
-                </h3>
-                {typeof me.data?.weekStart === "string" && (
-                  <Schedule
-                    control={control}
-                    name="schedule"
-                    weekStart={
-                      ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
-                        me.data?.weekStart
-                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6
-                    }
-                  />
-                )}
-              </div>
-              {data?.workingHours && <DateOverride workingHours={data.workingHours} />}
+      <div className="w-full">
+        <Form
+          form={form}
+          id="availability-form"
+          handleSubmit={async ({ dateOverrides, ...values }) => {
+            updateMutation.mutate({
+              scheduleId: schedule,
+              dateOverrides: dateOverrides.flatMap((override) => override.ranges),
+              ...values,
+            });
+          }}
+          className="flex flex-col pb-16 sm:mx-0 xl:flex-row xl:space-x-6">
+          <div className="flex-1 divide-y divide-neutral-200 rounded-md border">
+            <div className=" py-5 sm:p-6">
+              <h3 className="mb-2 px-5 text-base font-medium leading-6 text-gray-900 sm:pl-0">
+                {t("change_start_end")}
+              </h3>
+              {typeof me.data?.weekStart === "string" && (
+                <Schedule
+                  control={control}
+                  name="schedule"
+                  weekStart={
+                    ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
+                      me.data?.weekStart
+                    ) as 0 | 1 | 2 | 3 | 4 | 5 | 6
+                  }
+                />
+              )}
             </div>
-            <div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
-              <div className="xl:max-w-80 mt-4 w-full pr-4 sm:p-0">
-                <div>
-                  <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
-                    {t("timezone")}
-                  </label>
-                  <Controller
-                    name="timeZone"
-                    render={({ field: { onChange, value } }) =>
-                      value ? (
-                        <TimezoneSelect
-                          value={value}
-                          className="focus:border-brand mt-1 block w-72 rounded-md border-gray-300 text-sm"
-                          onChange={(timezone) => onChange(timezone.value)}
-                        />
-                      ) : (
-                        <SelectSkeletonLoader className="w-72" />
-                      )
-                    }
-                  />
-                </div>
-                <hr className="my-8" />
-                <div className="rounded-md">
-                  <h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
-                  <div className="mt-3 flex">
-                    <Button href="/availability/troubleshoot" color="secondary">
-                      {t("launch_troubleshooter")}
-                    </Button>
-                  </div>
+            {data?.workingHours && <DateOverride workingHours={data.workingHours} />}
+          </div>
+          <div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
+            <div className="xl:max-w-80 mt-4 w-full pr-4 sm:p-0">
+              <div>
+                <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+                  {t("timezone")}
+                </label>
+                <Controller
+                  name="timeZone"
+                  render={({ field: { onChange, value } }) =>
+                    value ? (
+                      <TimezoneSelect
+                        value={value}
+                        className="focus:border-brand mt-1 block w-72 rounded-md border-gray-300 text-sm"
+                        onChange={(timezone) => onChange(timezone.value)}
+                      />
+                    ) : (
+                      <SelectSkeletonLoader className="w-72" />
+                    )
+                  }
+                />
+              </div>
+              <hr className="my-8" />
+              <div className="rounded-md">
+                <h3 className="text-sm font-medium text-gray-900">{t("something_doesnt_look_right")}</h3>
+                <div className="mt-3 flex">
+                  <Button href="/availability/troubleshoot" color="secondary">
+                    {t("launch_troubleshooter")}
+                  </Button>
                 </div>
               </div>
             </div>
-          </Form>
-        </div>
+          </div>
+        </Form>
       </div>
     </Shell>
   );
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index d54ccc6462..c946246384 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -51,7 +51,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
   const watchDayRange = watch(name);
 
   return (
-    <div className="mb-1 flex w-full flex-col py-1 sm:flex-row">
+    <div className="mb-1 flex w-full flex-col px-5 py-1 sm:flex-row sm:px-0">
       {/* Label & switch container */}
       <div className="flex h-11 items-center justify-between sm:w-32">
         <div>
@@ -83,7 +83,6 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
           <SkeletonText className="mt-2.5 ml-1 h-6 w-48" />
         )}
       </>
-      <div className="my-2 h-[1px] w-full bg-gray-200 sm:hidden" />
     </div>
   );
 };
@@ -140,7 +139,7 @@ const Schedule = <
   const { i18n } = useLocale();
 
   return (
-    <>
+    <div className="divide-y sm:divide-none">
       {/* First iterate for each day */}
       {weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
         const weekdayIndex = (num + weekStart) % 7;
@@ -155,7 +154,7 @@ const Schedule = <
           />
         );
       })}
-    </>
+    </div>
   );
 };