Revert "fixed header (#27794)"

This reverts commit 6f6c27b47d.

apps/web/modules/shell/Shell.tsx

@@ -42,18 +42,13 @@ 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} />
@@ -64,10 +59,7 @@ 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;
@@ -98,13 +90,7 @@ 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}
@@ -156,19 +142,15 @@ 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:px-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:pl-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"
@@ -178,44 +160,22 @@ 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>
@@ -227,8 +187,7 @@ 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>
               )}
@@ -241,11 +200,7 @@ 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>
     </>
@@ -266,11 +221,7 @@ 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}