From 5174b21af1f0e3bb5908835abab95a76dd78af41 Mon Sep 17 00:00:00 2001
From: cemreinanc <cemreinanc@gmail.com>
Date: Wed, 13 May 2026 10:38:25 +0200
Subject: [PATCH] make header sticky instead of  fixed

---
 .../(bridgewater)/bridgewater-2025/layout.tsx |  4 +--
 .../(bridgewater)/bridgewater-reg/layout.tsx  |  2 +-
 .../(bridgewater)/bridgewater/layout.tsx      |  4 +--
 .../id-verification/page.tsx                  |  6 ++---
 .../(campaigns-registration)/rand/layout.tsx  |  2 +-
 .../components/futureeval-container.tsx       |  2 +-
 .../components/futureeval-hero-banner.tsx     |  2 +-
 .../(main)/components/top_chrome_client.tsx   |  2 +-
 front_end/src/app/(main)/layout.tsx           |  2 +-
 .../[slug]/prediction-flow/loading.tsx        |  6 ++---
 .../[slug]/prediction-flow/page.tsx           | 26 ++++++++++---------
 .../components/services_quiz_flow_content.tsx |  2 +-
 .../components/services_quiz_screen.tsx       |  6 +++--
 front_end/src/app/(storefront)/layout.tsx     |  4 +--
 front_end/src/app/(storefront)/page.tsx       | 13 +++-------
 front_end/src/app/not-found.tsx               |  2 +-
 16 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-2025/layout.tsx b/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-2025/layout.tsx
index 9d52425e67..dfe1fa3c2a 100644
--- a/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-2025/layout.tsx
+++ b/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-2025/layout.tsx
@@ -9,9 +9,9 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="h-full min-h-screen pt-header">
+    <div className="flex min-h-screen flex-col">
       <TopChrome />
-      <div className="h-full">{children}</div>
+      <div className="flex-1">{children}</div>
       <CookiesBanner />
       <Footer />
     </div>
diff --git a/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-reg/layout.tsx b/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-reg/layout.tsx
index c5664baa79..dfe1fa3c2a 100644
--- a/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-reg/layout.tsx
+++ b/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-reg/layout.tsx
@@ -9,7 +9,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex min-h-screen flex-col pt-header">
+    <div className="flex min-h-screen flex-col">
       <TopChrome />
       <div className="flex-1">{children}</div>
       <CookiesBanner />
diff --git a/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater/layout.tsx b/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater/layout.tsx
index 9d52425e67..dfe1fa3c2a 100644
--- a/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater/layout.tsx
+++ b/front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater/layout.tsx
@@ -9,9 +9,9 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="h-full min-h-screen pt-header">
+    <div className="flex min-h-screen flex-col">
       <TopChrome />
-      <div className="h-full">{children}</div>
+      <div className="flex-1">{children}</div>
       <CookiesBanner />
       <Footer />
     </div>
diff --git a/front_end/src/app/(campaigns-registration)/id-verification/page.tsx b/front_end/src/app/(campaigns-registration)/id-verification/page.tsx
index 72a88ca053..6385c1991a 100644
--- a/front_end/src/app/(campaigns-registration)/id-verification/page.tsx
+++ b/front_end/src/app/(campaigns-registration)/id-verification/page.tsx
@@ -16,9 +16,9 @@ export default async function Page() {
   const verificationSession = await getVerificationSession(currentUser);
 
   return (
-    <>
+    <div className="flex min-h-screen flex-col">
       <TopChrome />
-      <main className="mt-header flex h-full min-h-screen flex-col p-3 sm:p-5">
+      <main className="flex flex-1 flex-col p-3 sm:p-5">
         <h1 className="text-center text-2xl font-bold">ID verification</h1>
         <p className="text-center text-sm">
           On this page you can verify your identity and link it to your
@@ -40,6 +40,6 @@ export default async function Page() {
           )}
         </div>
       </main>
-    </>
+    </div>
   );
 }
diff --git a/front_end/src/app/(campaigns-registration)/rand/layout.tsx b/front_end/src/app/(campaigns-registration)/rand/layout.tsx
index c42ba2b486..db990564d3 100644
--- a/front_end/src/app/(campaigns-registration)/rand/layout.tsx
+++ b/front_end/src/app/(campaigns-registration)/rand/layout.tsx
@@ -9,7 +9,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex min-h-screen flex-col pt-header">
+    <div className="flex min-h-screen flex-col">
       <TopChrome />
       <div className="flex-1">{children}</div>
       <CookiesBanner />
diff --git a/front_end/src/app/(futureeval)/futureeval/components/futureeval-container.tsx b/front_end/src/app/(futureeval)/futureeval/components/futureeval-container.tsx
index dcc106118b..d0e0d4359c 100644
--- a/front_end/src/app/(futureeval)/futureeval/components/futureeval-container.tsx
+++ b/front_end/src/app/(futureeval)/futureeval/components/futureeval-container.tsx
@@ -8,7 +8,7 @@ type Props = HTMLAttributes<HTMLDivElement>;
 
 const FutureEvalContainer: React.FC<Props> = ({ className, children }) => {
   return (
-    <div className={cn(FE_COLORS.bgPrimary, "select-none pt-header")}>
+    <div className={cn(FE_COLORS.bgPrimary, "select-none pt-12")}>
       <div
         className={cn(
           "mx-auto box-content max-w-[1044px] px-4 pb-[58px] pt-8 sm:px-10 md:px-16 lg:pb-[143px]",
diff --git a/front_end/src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsx b/front_end/src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsx
index 362749e8b1..762ed2c5a8 100644
--- a/front_end/src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsx
+++ b/front_end/src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsx
@@ -18,7 +18,7 @@ const FutureEvalHeroBanner: React.FC<Props> = ({ tabs, activeTab }) => {
   const showHero = activeTab === "benchmark";
 
   return (
-    <div className={cn("w-full pt-header", FE_COLORS.bgPrimary)}>
+    <div className={cn("w-full pt-12", FE_COLORS.bgPrimary)}>
       <div
         className={cn(
           "mx-auto box-content max-w-[1044px] px-4 pt-4 sm:px-10 md:px-16 md:pt-8 lg:pt-16",
diff --git a/front_end/src/app/(main)/components/top_chrome_client.tsx b/front_end/src/app/(main)/components/top_chrome_client.tsx
index 5d6e2aab06..c0b58a03b3 100644
--- a/front_end/src/app/(main)/components/top_chrome_client.tsx
+++ b/front_end/src/app/(main)/components/top_chrome_client.tsx
@@ -84,7 +84,7 @@ export const TopChromeClient: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div
       ref={topChromeRef}
-      className="fixed left-0 top-0 z-[210] w-full print:hidden"
+      className="sticky left-0 top-0 z-[210] w-full print:hidden"
     >
       {children}
     </div>
diff --git a/front_end/src/app/(main)/layout.tsx b/front_end/src/app/(main)/layout.tsx
index b6da1b65c9..a27434dae3 100644
--- a/front_end/src/app/(main)/layout.tsx
+++ b/front_end/src/app/(main)/layout.tsx
@@ -35,7 +35,7 @@ export default async function RootLayout({
     <PrintOverrideProvider>
       <ShowActiveCommunityProvider>
         <TopChromeHeaderProvider initialHeaderState={initialHeaderState}>
-          <div className="flex min-h-screen flex-col pt-header print:pt-0">
+          <div className="flex min-h-screen flex-col">
             <TopChrome />
             <div className="flex-grow">{children}</div>
             {!PUBLIC_MINIMAL_UI && (
diff --git a/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/loading.tsx b/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/loading.tsx
index 2082280f8b..86c199e709 100644
--- a/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/loading.tsx
+++ b/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/loading.tsx
@@ -9,7 +9,7 @@ import LoadingHeaderActions from "./loading_header_actions";
 
 export default function Loading() {
   return (
-    <>
+    <div className="flex min-h-screen flex-col">
       <TopChrome
         defaultHeader={
           <FlowHeaderRoot title="">
@@ -25,7 +25,7 @@ export default function Loading() {
           </FlowHeaderRoot>
         }
       />
-      <div className="mx-auto flex min-h-screen max-w-3xl flex-grow flex-col pt-header">
+      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col">
         <div className="animate-pulse">
           {/* Progress section skeleton */}
           <div className="mb-6 flex items-center gap-2 bg-gray-0 p-4 shadow-md dark:bg-gray-0-dark">
@@ -42,6 +42,6 @@ export default function Loading() {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/page.tsx b/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/page.tsx
index 6c4351f849..d67c729a9b 100644
--- a/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/page.tsx
+++ b/front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/page.tsx
@@ -64,18 +64,20 @@ export default async function PredictionFlow(props: Props) {
       flowType={flowType}
       initialPosts={forecastFlowPosts}
     >
-      <TopChrome
-        defaultHeader={
-          <PredictionFlowHeader
-            tournamentName={tournament.name}
-            tournamentSlug={tournamentSlug}
-          />
-        }
-      />
-      <main className="mx-auto flex min-h-screen max-w-3xl flex-grow flex-col pt-header">
-        <ProgressSection />
-        <PredictionFlowPost tournamentSlug={tournamentSlug} />
-      </main>
+      <div className="flex min-h-screen flex-col">
+        <TopChrome
+          defaultHeader={
+            <PredictionFlowHeader
+              tournamentName={tournament.name}
+              tournamentSlug={tournamentSlug}
+            />
+          }
+        />
+        <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col">
+          <ProgressSection />
+          <PredictionFlowPost tournamentSlug={tournamentSlug} />
+        </main>
+      </div>
     </PredictionFlowProvider>
   );
 }
diff --git a/front_end/src/app/(services-quiz)/components/services_quiz_flow_content.tsx b/front_end/src/app/(services-quiz)/components/services_quiz_flow_content.tsx
index a1e5fb19ff..3024e87c8a 100644
--- a/front_end/src/app/(services-quiz)/components/services_quiz_flow_content.tsx
+++ b/front_end/src/app/(services-quiz)/components/services_quiz_flow_content.tsx
@@ -26,7 +26,7 @@ const ServicesQuizFlowContent: FC = () => {
   const ActiveStep = STEP_COMPONENTS[step];
 
   return (
-    <main className="mx-auto flex min-h-screen max-w-[800px] flex-col pt-header antialiased">
+    <main className="mx-auto flex w-full max-w-[800px] flex-1 flex-col antialiased">
       <ServicesQuizStepper />
       <ActiveStep />
     </main>
diff --git a/front_end/src/app/(services-quiz)/components/services_quiz_screen.tsx b/front_end/src/app/(services-quiz)/components/services_quiz_screen.tsx
index 32cce660e5..671cd06e24 100644
--- a/front_end/src/app/(services-quiz)/components/services_quiz_screen.tsx
+++ b/front_end/src/app/(services-quiz)/components/services_quiz_screen.tsx
@@ -20,8 +20,10 @@ const ServicesQuizScreen: FC<Props> = ({ initialCategory }) => {
       exitTo="/services"
       onSubmit={appendServicesQuizRow}
     >
-      <TopChrome defaultHeader={<ServicesQuizHeader />} />
-      <ServicesQuizFlowContent />
+      <div className="flex min-h-screen flex-col">
+        <TopChrome defaultHeader={<ServicesQuizHeader />} />
+        <ServicesQuizFlowContent />
+      </div>
       <ServicesQuizExitModal />
     </ServicesQuizRootProvider>
   );
diff --git a/front_end/src/app/(storefront)/layout.tsx b/front_end/src/app/(storefront)/layout.tsx
index 103ca3510b..e92433a359 100644
--- a/front_end/src/app/(storefront)/layout.tsx
+++ b/front_end/src/app/(storefront)/layout.tsx
@@ -26,10 +26,10 @@ export default function StorefrontLayout({
   return (
     <ThemeOverrideContainer
       override="light"
-      className="flex min-h-screen flex-col bg-blue-200 pt-header"
+      className="flex min-h-screen flex-col bg-blue-200"
     >
       <TopChrome hideHeader />
-      <div className="flex-grow">{children}</div>
+      <div className="flex flex-grow flex-col">{children}</div>
       <FeedbackFloat />
       <StorefrontFooter />
       <CookiesBanner />
diff --git a/front_end/src/app/(storefront)/page.tsx b/front_end/src/app/(storefront)/page.tsx
index 53107ba006..974ba9c4e5 100644
--- a/front_end/src/app/(storefront)/page.tsx
+++ b/front_end/src/app/(storefront)/page.tsx
@@ -63,25 +63,20 @@ export default async function Home() {
     return redirect(PUBLIC_LANDING_PAGE_URL);
   }
 
-  let siteStats = {
+  const fallbackSiteStats = {
     predictions: 2133159,
     questions: 17357,
     resolved_questions: 6654,
     years_of_predictions: 10,
   };
 
-  const [initialNewsPosts] = await Promise.all([
+  const [initialNewsPosts, siteStats] = await Promise.all([
     ServerPostsApi.getPostsWithCP(FILTERS.popular),
-    serverMiscApi
-      .getSiteStats()
-      .then((s) => {
-        siteStats = s;
-      })
-      .catch(() => {}),
+    serverMiscApi.getSiteStats().catch(() => fallbackSiteStats),
   ]);
 
   return (
-    <main className="mx-auto min-h-screen max-w-[1180px]">
+    <main className="mx-auto w-full max-w-[1180px] flex-1">
       <OnboardingCheck />
       <EmailConfirmation />
       <HeroSection stats={siteStats} />
diff --git a/front_end/src/app/not-found.tsx b/front_end/src/app/not-found.tsx
index 9b2b74cb91..9e458b0144 100644
--- a/front_end/src/app/not-found.tsx
+++ b/front_end/src/app/not-found.tsx
@@ -11,7 +11,7 @@ export default async function NotFound() {
   return (
     <div className="mx-auto flex min-h-screen w-full flex-col text-center">
       <TopChrome />
-      <NotFoundSection className="pt-header" />
+      <NotFoundSection />
 
       {!PUBLIC_MINIMAL_UI && (
         <>