fix: make top chrome sticky instead of fixed

[cemreinanc]

It prevents jumpy loading

Summary by CodeRabbit

• Style
  • Updated page layouts across multiple sections to use a consistent flexbox architecture.
  • Changed header positioning from fixed to sticky for improved user interaction.
  • Removed header-related padding from page containers to streamline spacing.
  • Adjusted main content containers to use flexible sizing for better vertical space utilization.
  • Standardized layout patterns to improve visual consistency throughout the application.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 137fc1c6-3fe2-4b7d-be8a-3016d10ee25d

📥 Commits

Reviewing files that changed from the base of the PR and between ba32cb2 and 5174b21.

📒 Files selected for processing (16)

• front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-2025/layout.tsx
• front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater-reg/layout.tsx
• front_end/src/app/(campaigns-registration)/(bridgewater)/bridgewater/layout.tsx
• front_end/src/app/(campaigns-registration)/id-verification/page.tsx
• front_end/src/app/(campaigns-registration)/rand/layout.tsx
• front_end/src/app/(futureeval)/futureeval/components/futureeval-container.tsx
• front_end/src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsx
• front_end/src/app/(main)/components/top_chrome_client.tsx
• front_end/src/app/(main)/layout.tsx
• front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/loading.tsx
• front_end/src/app/(prediction-flow)/tournament/[slug]/prediction-flow/page.tsx
• front_end/src/app/(services-quiz)/components/services_quiz_flow_content.tsx
• front_end/src/app/(services-quiz)/components/services_quiz_screen.tsx
• front_end/src/app/(storefront)/layout.tsx
• front_end/src/app/(storefront)/page.tsx
• front_end/src/app/not-found.tsx

---

📝 Walkthrough

Walkthrough

This PR restructures page layouts across the application to shift from fixed top-chrome positioning with padding compensation (pt-header) to sticky positioning with standardized flexbox. Multiple layout files remove header padding and use flex-1 for content filling. The TopChromeClient changes from fixed to sticky positioning. FutureEval components update to pt-12 padding, and the storefront refactors promise handling for siteStats.

Changes

Layout restructuring: sticky top chrome and flex standardization

Layer / File(s)	Summary
TopChrome positioning: fixed to sticky src/app/(main)/components/top_chrome_client.tsx	The top chrome container changes from position: fixed to position: sticky, enabling the removal of padding-based spacing compensation across the application.
Campaign registration layouts: padding removal and flex restructuring src/app/(campaigns-registration)/(bridgewater)/bridgewater-2025/layout.tsx, bridgewater-reg/layout.tsx, bridgewater/layout.tsx, src/app/(campaigns-registration)/id-verification/page.tsx, src/app/(campaigns-registration)/rand/layout.tsx	Multiple campaign registration layout files remove pt-header padding and restructure outer containers to use flex min-h-screen flex-col with inner content containers set to flex-1 for flexible filling.
Prediction flow layouts: flex restructuring and padding removal src/app/(prediction-flow)/tournament/[slug]/prediction-flow/loading.tsx, src/app/(prediction-flow)/tournament/[slug]/prediction-flow/page.tsx	Both loading and page components add outer flex wrapper divs (flex min-h-screen flex-col), update inner containers to flex-1, and remove pt-header and min-h-screen sizing utilities.
Services quiz layout wrapper and content flex update src/app/(services-quiz)/components/services_quiz_flow_content.tsx, src/app/(services-quiz)/components/services_quiz_screen.tsx	The services quiz screen adds a flex wrapper div around TopChrome and content, while the flow content component updates its main element to use flex-1 instead of min-h-screen and pt-header.
Main app layout and not-found error page updates src/app/(main)/layout.tsx, src/app/not-found.tsx	The main app layout removes pt-header and print:pt-0 padding classes, and the not-found error page removes the pt-header prop from NotFoundSection.
Storefront layout and siteStats promise refactoring src/app/(storefront)/layout.tsx, src/app/(storefront)/page.tsx	The storefront layout removes pt-header and updates child container flex classes. The home page refactors siteStats acquisition from mutating a variable through .then() to using Promise.all() with fallback, and updates the main element to use flex-1 instead of min-h-screen.
FutureEval components: padding adjustment to pt-12 src/app/(futureeval)/futureeval/components/futureeval-container.tsx, src/app/(futureeval)/futureeval/components/futureeval-hero-banner.tsx	FutureEval container and hero banner components change top padding from pt-header to pt-12, following a different spacing pattern independent of the main layout restructuring.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Metaculus/metaculus#4415: Both PRs adjust front_end/src/app/(main)/layout.tsx wrapper padding classes and header-related spacing, with overlapping layout-shift fixes.

Suggested reviewers

• ncarazon
• hlbmtc

---

🐰 Hopping through layouts with grace,
Sticky chrome takes fixed's place,
Flex containers fill the space,
No more padding—just flex pace!
Layouts dance in harmony true,
From one to twelve, the padding's new! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change in the pull request: converting the top chrome from fixed to sticky positioning.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/bulletins-loading-style

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Cleanup: Preview Environment Removed

The preview environment for this PR has been destroyed.

Resource	Status
🌐 Preview App	Deleted
🗄️ PostgreSQL Branch	Deleted
⚡ Redis Database	Deleted
🔧 GitHub Deployments	Removed
📦 Docker Image	Retained (auto-cleanup via GHCR policies)

---

Cleanup triggered by PR close at 2026-05-13T10:09:56Z