From 6f6c27b47d0af53e2f5bc165cf3c745b537d8873 Mon Sep 17 00:00:00 2001
From: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Date: Tue, 10 Feb 2026 14:10:13 +0530
Subject: [PATCH] fixed header (#27794)

---
 apps/web/modules/shell/Shell.tsx | 83 +++++++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 17 deletions(-)

diff --git a/apps/web/modules/shell/Shell.tsx b/apps/web/modules/shell/Shell.tsx
index eaf62deb40..284722527a 100644
--- a/apps/web/modules/shell/Shell.tsx
+++ b/apps/web/modules/shell/Shell.tsx
@@ -42,13 +42,18 @@ const Layout = (props: LayoutProps) => {
       <DynamicModals />
 
       <div className="flex min-h-screen flex-col">
-        {banners && !props.isPlatformUser && <BannerContainer banners={banners} />}
+        {banners && !props.isPlatformUser && (
+          <BannerContainer banners={banners} />
+        )}
 
         <div className="flex flex-1" data-testid="dashboard-shell">
           {props.SidebarContainer ? (
             cloneElement(props.SidebarContainer, { bannersHeight })
           ) : (
-            <SideBarContainer isPlatformUser={props.isPlatformUser} bannersHeight={bannersHeight} />
+            <SideBarContainer
+              isPlatformUser={props.isPlatformUser}
+              bannersHeight={bannersHeight}
+            />
           )}
           <div className="flex w-0 flex-1 flex-col">
             <MainContainer {...props} />
@@ -59,7 +64,10 @@ const Layout = (props: LayoutProps) => {
   );
 };
 
-type DrawerState = [isOpen: boolean, setDrawerOpen: Dispatch<SetStateAction<boolean>>];
+type DrawerState = [
+  isOpen: boolean,
+  setDrawerOpen: Dispatch<SetStateAction<boolean>>
+];
 
 export type LayoutProps = {
   centered?: boolean;
@@ -90,7 +98,13 @@ export type LayoutProps = {
   disableSticky?: boolean;
 };
 
-const KBarWrapper = ({ children, withKBar = false }: { withKBar: boolean; children: React.ReactNode }) =>
+const KBarWrapper = ({
+  children,
+  withKBar = false,
+}: {
+  withKBar: boolean;
+  children: React.ReactNode;
+}) =>
   withKBar ? (
     <KBarRoot>
       {children}
@@ -142,15 +156,19 @@ export function ShellMain(props: LayoutProps) {
           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 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.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)]"
+          )}
+        >
           {!!props.backPath && (
             <Button
               variant="icon"
               size="sm"
               color="minimal"
               onClick={() =>
-                typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
+                typeof props.backPath === "string"
+                  ? router.push(props.backPath as string)
+                  : router.back()
               }
               StartIcon="arrow-left"
               aria-label="Go Back"
@@ -160,22 +178,44 @@ export function ShellMain(props: LayoutProps) {
           )}
           {props.heading && (
             <header
-              className={classNames(props.large && "py-8", "flex w-full max-w-full items-center truncate")}>
-              {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
+              className={classNames(
+                props.large && "py-8",
+                "flex w-full max-w-full items-center truncate"
+              )}
+            >
+              {props.HeadingLeftIcon && (
+                <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>
+              )}
               <div
-                className={classNames("w-full truncate ltr:mr-4 rtl:ml-4 md:block", props.headerClassName)}>
+                className={classNames(
+                  "w-full truncate ltr:mr-4 rtl:ml-4 md:block",
+                  props.headerClassName
+                )}
+              >
                 {props.heading && (
                   <h3
                     className={classNames(
                       "font-cal text-emphasis max-w-28 sm:max-w-72 md:max-w-80 hidden truncate text-lg font-semibold tracking-wide sm:text-xl md:block xl:max-w-full",
                       props.smallHeading ? "text-base" : "text-xl"
-                    )}>
-                    {!isLocaleReady ? <SkeletonText invisible /> : props.heading}
+                    )}
+                  >
+                    {!isLocaleReady ? (
+                      <SkeletonText invisible />
+                    ) : (
+                      props.heading
+                    )}
                   </h3>
                 )}
                 {props.subtitle && (
-                  <p className="text-default hidden text-sm md:block" data-testid="subtitle">
-                    {!isLocaleReady ? <SkeletonText invisible /> : props.subtitle}
+                  <p
+                    className="text-default hidden text-sm md:block"
+                    data-testid="subtitle"
+                  >
+                    {!isLocaleReady ? (
+                      <SkeletonText invisible />
+                    ) : (
+                      props.subtitle
+                    )}
                   </p>
                 )}
               </div>
@@ -187,7 +227,8 @@ export function ShellMain(props: LayoutProps) {
                       ? "relative"
                       : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
                     "shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
-                  )}>
+                  )}
+                >
                   {isLocaleReady && props.CTA}
                 </div>
               )}
@@ -200,7 +241,11 @@ export function ShellMain(props: LayoutProps) {
         <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")}>
+      <div
+        className={classNames(
+          props.flexChildrenContainer && "flex flex-1 flex-col"
+        )}
+      >
         {props.children}
       </div>
     </>
@@ -221,7 +266,11 @@ function MainContainer({
       {TopNavContainerProp}
       <div className="max-w-full p-2 sm:py-4 lg:px-6">
         <ErrorBoundary>
-          {!props.withoutMain ? <ShellMain {...props}>{props.children}</ShellMain> : props.children}
+          {!props.withoutMain ? (
+            <ShellMain {...props}>{props.children}</ShellMain>
+          ) : (
+            props.children
+          )}
         </ErrorBoundary>
         {/* show bottom navigation for md and smaller (tablet and phones) on pages where back button doesn't exist */}
         {!props.backPath ? MobileNavigationContainerProp : null}