fix: make top chrome sticky instead of fixed

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>

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 />

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>

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>
   );
 }

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 />

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]",

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",

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>

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

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>
   );
 }

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>
   );
 }

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>

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>
   );

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 />

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} />

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