From 267686704d38c88b31a692c00a703fa7d1ed44fc Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 10 Feb 2026 14:36:21 +0530
Subject: [PATCH] fix: availability page UI (#27825)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 apps/web/modules/shell/Shell.tsx                           | 7 +++++--
 .../platform/atoms/availability/AvailabilitySettings.tsx   | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/web/modules/shell/Shell.tsx b/apps/web/modules/shell/Shell.tsx
index 284722527a..af61991d82 100644
--- a/apps/web/modules/shell/Shell.tsx
+++ b/apps/web/modules/shell/Shell.tsx
@@ -96,6 +96,7 @@ export type LayoutProps = {
   smallHeading?: boolean;
   isPlatformUser?: boolean;
   disableSticky?: boolean;
+  topAlignedHeading?: boolean;
 };
 
 const KBarWrapper = ({
@@ -154,8 +155,9 @@ export function ShellMain(props: LayoutProps) {
         <div
           style={headerStyle}
           className={classNames(
-            "bg-default mb-0 flex items-center md:mb-6 md:mt-0",
+            "bg-default mb-0 flex md:mb-6 md:mt-0",
             props.smallHeading ? "lg:mb-7" : "lg:mb-8",
+            props.topAlignedHeading ? "items-start" : "items-center",
             !props.disableSticky &&
               "sticky top-0 z-10 md:fixed md:w-[calc(100%-3.5rem)] md:pt-3 md:pb-2 md:px-5 md:left-14 lg:left-56 lg:w-[calc(100%-14rem)]"
           )}
@@ -180,7 +182,8 @@ export function ShellMain(props: LayoutProps) {
             <header
               className={classNames(
                 props.large && "py-8",
-                "flex w-full max-w-full items-center truncate"
+                "flex w-full max-w-full truncate",
+                props.topAlignedHeading ? "items-start" : "items-center"
               )}
             >
               {props.HeadingLeftIcon && (
diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index 79fb263ad0..6b59c248d4 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -405,6 +405,8 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
     return (
       <Shell
         headerClassName={cn(customClassNames?.containerClassName)}
+        disableSticky
+        topAlignedHeading
         backPath={backPath}
         title={schedule.name ? `${schedule.name} | ${t("availability")}` : t("availability")}
         heading={