fixed availabilty layout

apps/web/components/ui/EditableHeading.tsx

@@ -21,7 +21,7 @@ const EditableHeading = function EditableHeading({
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
           {!isEditing && isReady && (
-            <FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
+            <FiEdit2 className=" ml-1 -mt-px inline h-3 w-3  text-gray-500 group-hover:text-gray-500" />
           )}
           <input
             {...passThroughProps}

apps/web/pages/availability/[schedule].tsx

@@ -148,7 +148,7 @@ export default function Availability({ schedule }: { schedule: number }) {
         )
       }
       CTA={
-        <div className="mr-10 flex items-center justify-end xl:mr-36">
+        <div className="flex items-center justify-end">
           <div className="flex items-center rounded-md px-2 sm:hover:bg-gray-100">
             <Skeleton
               as={Label}
@@ -186,7 +186,7 @@ export default function Availability({ schedule }: { schedule: number }) {
             });
           }}
           className="flex flex-col sm:mx-0 xl:flex-row xl:space-x-6">
-          <div className="mx-10 flex-1 flex-row xl:mr-0 xl:ml-36">
+          <div className="flex-1 flex-row xl:mr-0">
             <div className="mb-6 rounded-md border">
               <div>
                 {typeof me.data?.weekStart === "string" && (
@@ -206,7 +206,7 @@ export default function Availability({ schedule }: { schedule: number }) {
               {data?.workingHours && <DateOverride workingHours={data.workingHours} />}
             </div>
           </div>
-          <div className="min-w-40 col-span-3 ml-10 space-y-2 lg:col-span-1 xl:ml-36">
+          <div className="min-w-40 col-span-3 space-y-2 lg:col-span-1">
             <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
               <div>
                 <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">

packages/features/schedules/components/Schedule.tsx

@@ -140,7 +140,7 @@ const Schedule = <
   const { i18n } = useLocale();
 
   return (
-    <div className="divide-y p-4 sm:divide-none">
+    <div className="p-4">
       {/* First iterate for each day */}
       {weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
         const weekdayIndex = (num + weekStart) % 7;

packages/features/shell/Shell.tsx

@@ -783,12 +783,7 @@ export function ShellMain(props: LayoutProps) {
 
   return (
     <>
-      <div
-        className={classNames(
-          "mb-6 flex items-center sm:mt-0",
-          props.smallHeading ? "lg:mb-7" : "lg:mb-8",
-          props.backPath === "/availability" && "ml-2.5 xl:ml-[7rem]"
-        )}>
+      <div className={classNames("mb-6 flex sm:mt-0", props.smallHeading ? "lg:mb-7" : "lg:mb-8")}>
         {!!props.backPath && (
           <Button
             variant="icon"
@@ -799,7 +794,7 @@ export function ShellMain(props: LayoutProps) {
             }
             StartIcon={FiArrowLeft}
             aria-label="Go Back"
-            className="rounded-md ltr:mr-2 rtl:ml-2"
+            className="mt-2 rounded-md ltr:mr-2 rtl:ml-2"
           />
         )}
         {props.heading && (