fix: prevent layout shift in sticky navbar (#27256)

* fix navbar layout shift

* fix: adjust layout for iPad breakpoints

* fix: respect disableSticky for md+ header positioning

* Fix sticky header condition in Shell component

* Update apps/web/modules/event-types/components/EventTypeLayout.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* Update apps/web/modules/shell/Shell.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* Update apps/web/components/apps/layouts/AppsLayout.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* Update apps/web/modules/event-types/components/EventTypeLayout.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* Update packages/app-store/_components/AppCategoryNavigation.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* Fix formatting in ShellMainAppDir component

* Update apps/web/modules/shell/Shell.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* Adjust layout styles for Shell component

* Add dynamic header style based on banners height

* fix respect disableSticky and add spacing to navbar elements

* Refactor JSX structure in Shell component

* Refactor header div and sticky behavior

* Update AppsLayout.tsx

* remove sticky navbar from app store

* fix alignment

---------

Co-authored-by: Deepanshu Verma <deepanshuverma186@email.com>
Co-authored-by: Sahitya Chandra <sahityajb@gmail.com>
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -19,7 +19,7 @@ export default function AppsLayout({ children, actions, emptyStore, isAdmin, ...
   const router = useRouter();
 
   return (
-    <Shell {...rest} actions={actions?.("block")}>
+    <Shell {...rest} disableSticky={true} actions={actions?.("block")}>
       <div className="flex flex-col xl:flex-row">
         <main className="w-full">
           {emptyStore ? (

apps/web/modules/shell/Shell.tsx

@@ -127,15 +127,22 @@ export default function Shell(props: LayoutProps) {
 export function ShellMain(props: LayoutProps) {
   const router = useRouter();
   const { isLocaleReady } = useLocale();
+  const { bannersHeight } = useBanners();
+
+  const headerStyle =
+    !props.disableSticky && bannersHeight
+      ? { top: `${bannersHeight}px` as const }
+      : undefined;
 
   return (
     <>
       {(props.heading || !!props.backPath) && (
         <div
+          style={headerStyle}
           className={classNames(
             "bg-default mb-0 flex items-center md:mb-6 md:mt-0",
             props.smallHeading ? "lg:mb-7" : "lg:mb-8",
-            !props.disableSticky && "sticky top-0 z-10"
+            !props.disableSticky && "sticky top-0 z-10 md:fixed md:w-[calc(100%-3.5rem)] md:pt-3 md:pb-2 md:pl-5 md:left-14 lg:left-56 lg:w-[calc(100%-14rem)]"
           )}>
           {!!props.backPath && (
             <Button
@@ -189,6 +196,9 @@ export function ShellMain(props: LayoutProps) {
           )}
         </div>
       )}
+      {(props.heading || !!props.backPath) && !props.disableSticky && (
+        <div className="hidden md:block md:h-14" aria-hidden="true" />
+      )}
       {props.afterHeading && <>{props.afterHeading}</>}
       <div className={classNames(props.flexChildrenContainer && "flex flex-1 flex-col")}>
         {props.children}