diff --git a/apps/client/app/components/layout.tsx b/apps/client/app/components/layout.tsx
index 12f699a8..ebbc04e2 100644
--- a/apps/client/app/components/layout.tsx
+++ b/apps/client/app/components/layout.tsx
@@ -6,7 +6,7 @@ export default function Layout() {
 	return (
 		<div
 			className={cn(
-				"absolute inset-0",
+				"relative min-h-dvh w-full",
 				"[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/root.tsx b/apps/client/app/root.tsx
index 8dbe372c..4d47d854 100644
--- a/apps/client/app/root.tsx
+++ b/apps/client/app/root.tsx
@@ -42,7 +42,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 				<Links />
 			</head>
 			<QueryClientProvider client={queryClient}>
-				<body className="h-screen">
+				<body className="min-h-dvh">
 					{children}
 					<Toaster />
 					<ScrollRestoration />
