From dbef7644d4cc0adafd5f85b6931413bda698f743 Mon Sep 17 00:00:00 2001
From: Kartik Labhshetwar <kartik.labhshetwar@gmail.com>
Date: Tue, 2 Dec 2025 18:50:14 +0530
Subject: [PATCH] fix: improve availability working hours layout spacing and
 editable heading icon gap (#25525)

* fix: improve availability working hours layout spacing and editable heading icon gap

* refactor: wrap DateOverride in styled container in AvailabilitySettings
---
 .../availability/AvailabilitySettings.tsx     | 62 ++++++++++---------
 .../editable-heading/EditableHeading.tsx      |  2 +-
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index 8cb2f054c6..d867001818 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -278,13 +278,11 @@ const SmallScreenSideBar = ({ open, children }: { open: boolean; children: JSX.E
   return (
     <div
       className={classNames(
-        open
-          ? "fadeIn fixed inset-0 z-50 bg-neutral-800/70 transition-opacity sm:hidden"
-          : ""
+        open ? "fadeIn fixed inset-0 z-50 bg-neutral-800/70 transition-opacity sm:hidden" : ""
       )}>
       <div
         className={classNames(
-          "bg-default fixed right-0 z-20 flex h-screen w-80 flex-col stack-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
+          "bg-default stack-y-2 fixed right-0 z-20 flex h-screen w-80 flex-col overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
           open ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
         )}>
         {open ? children : null}
@@ -435,7 +433,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                   <Skeleton
                     as={Label}
                     htmlFor="hiddenSwitch"
-                    className="mt-2 cursor-pointer self-center pe-2"
+                    className="pe-2 mt-2 cursor-pointer self-center"
                     loadingClassName="me-4"
                     waitForTranslation={!isPlatform}>
                     {t("set_to_default")}
@@ -498,7 +496,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                   )}>
                   <div
                     className={classNames(
-                      "bg-default fixed right-0 z-20 flex h-screen w-80 flex-col stack-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
+                      "bg-default stack-y-2 fixed right-0 z-20 flex h-screen w-80 flex-col overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
                       openSidebar ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
                     )}>
                     <div className="flex flex-row items-center pt-16">
@@ -561,7 +559,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                       )}
                     </div>
 
-                    <div className="min-w-40 col-span-3 stack-y-2 px-2 py-4 lg:col-span-1">
+                    <div className="min-w-40 stack-y-2 col-span-3 px-2 py-4 lg:col-span-1">
                       <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
                         <div>
                           <Skeleton
@@ -593,8 +591,8 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                         </div>
                         {!isPlatform && (
                           <>
-                            <hr className="border-subtle my-7" />
-                            <div className="rounded-md md:block">
+                            <hr className="border-subtle my-8" />
+                            <div className="border-subtle rounded-md border p-4 md:block">
                               <Skeleton
                                 as="h3"
                                 className="mb-0 inline-block text-sm font-medium"
@@ -681,25 +679,33 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                 </div>
               </div>
               {enableOverrides && (
-                <BookerStoreProvider>
-                  <DateOverride
-                    isDryRun={isDryRun}
-                    workingHours={schedule.workingHours}
-                    userTimeFormat={timeFormat}
-                    handleSubmit={handleSubmit}
-                    travelSchedules={travelSchedules}
-                    weekStart={
-                      ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
-                        weekStart
-                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6
-                    }
-                    overridesModalClassNames={customClassNames?.overridesModalClassNames}
-                    classNames={customClassNames?.dateOverrideClassNames}
-                  />
-                </BookerStoreProvider>
+                <div className="border-subtle rounded-md border">
+                  <BookerStoreProvider>
+                    <DateOverride
+                      isDryRun={isDryRun}
+                      workingHours={schedule.workingHours}
+                      userTimeFormat={timeFormat}
+                      handleSubmit={handleSubmit}
+                      travelSchedules={travelSchedules}
+                      weekStart={
+                        [
+                          "Sunday",
+                          "Monday",
+                          "Tuesday",
+                          "Wednesday",
+                          "Thursday",
+                          "Friday",
+                          "Saturday",
+                        ].indexOf(weekStart) as 0 | 1 | 2 | 3 | 4 | 5 | 6
+                      }
+                      overridesModalClassNames={customClassNames?.overridesModalClassNames}
+                      classNames={customClassNames?.dateOverrideClassNames}
+                    />
+                  </BookerStoreProvider>
+                </div>
               )}
             </div>
-            <div className="min-w-40 col-span-3 hidden stack-y-2 md:block lg:col-span-1">
+            <div className="min-w-40 stack-y-2 col-span-3 hidden md:block lg:col-span-1">
               <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
                 <div>
                   <Skeleton
@@ -729,8 +735,8 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                   <></>
                 ) : (
                   <>
-                    <hr className="border-subtle my-6 mr-8" />
-                    <div className="rounded-md">
+                    <hr className="border-subtle my-8 mr-8" />
+                    <div className="border-subtle rounded-md border p-4">
                       <Skeleton
                         as="h3"
                         className="mb-0 inline-block text-sm font-medium"
diff --git a/packages/ui/components/editable-heading/EditableHeading.tsx b/packages/ui/components/editable-heading/EditableHeading.tsx
index a366cfa5cc..caeb006154 100644
--- a/packages/ui/components/editable-heading/EditableHeading.tsx
+++ b/packages/ui/components/editable-heading/EditableHeading.tsx
@@ -47,7 +47,7 @@ export const EditableHeading = function EditableHeading({
             onChange={(e) => onChange && onChange(e.target.value)}
           />
           {!isEditing && isReady && !disabled && (
-            <Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-1 inline  h-3 w-3" />
+            <Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-3 inline h-3 w-3" />
           )}
         </label>
       </div>