From bd168df352e5e0e97cc7a7a8788c0ac822310992 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Thu, 30 Oct 2025 18:22:42 +0100
Subject: [PATCH] style(layout): fix header sticky

style(layout): fix unnecessary scroll
---
 apps/client/app/app.css                        |  5 +++++
 apps/client/app/components/grid-background.tsx |  2 +-
 apps/client/app/components/layout.tsx          | 16 +++++++++-------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/apps/client/app/app.css b/apps/client/app/app.css
index 8e06eb4..26af738 100644
--- a/apps/client/app/app.css
+++ b/apps/client/app/app.css
@@ -24,6 +24,11 @@ body {
 	}
 }
 
+.main-content {
+	scrollbar-width: thin;
+	scrollbar-gutter: stable;
+}
+
 @theme inline {
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
diff --git a/apps/client/app/components/grid-background.tsx b/apps/client/app/components/grid-background.tsx
index 5d4c687..945cedb 100644
--- a/apps/client/app/components/grid-background.tsx
+++ b/apps/client/app/components/grid-background.tsx
@@ -11,7 +11,7 @@ export function GridBackground({ children, className, containerClassName }: Grid
 	return (
 		<div
 			className={cn(
-				"relative min-h-dvh w-full overflow-x-hidden",
+				"relative min-h-full w-full overflow-x-hidden",
 				"[background-size:20px_20px] sm:[background-size:40px_40px]",
 				"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
 				"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
diff --git a/apps/client/app/components/layout.tsx b/apps/client/app/components/layout.tsx
index abb3336..86aaf56 100644
--- a/apps/client/app/components/layout.tsx
+++ b/apps/client/app/components/layout.tsx
@@ -36,8 +36,8 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 	return (
 		<SidebarProvider defaultOpen={true}>
 			<AppSidebar />
-			<div className="w-full relative">
-				<header className="sticky top-0 z-50 bg-card-header border-b border-border/50">
+			<div className="w-full relative flex flex-col h-screen overflow-hidden">
+				<header className="z-50 bg-card-header border-b border-border/50 flex-shrink-0">
 					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container">
 						<div className="flex items-center gap-4">
 							<SidebarTrigger />
@@ -69,11 +69,13 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 						)}
 					</div>
 				</header>
-				<GridBackground>
-					<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
-						<Outlet />
-					</main>
-				</GridBackground>
+				<div className="main-content flex-1 overflow-y-auto">
+					<GridBackground>
+						<main className="flex flex-col p-2 pt-2 sm:p-8 sm:pt-6 mx-auto">
+							<Outlet />
+						</main>
+					</GridBackground>
+				</div>
 			</div>
 		</SidebarProvider>
 	);