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

@@ -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 && (

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={