From 7fefc2bbed2b66b2349ca182144b10eff171e345 Mon Sep 17 00:00:00 2001
From: Taesu <166604494+bytaesu@users.noreply.github.com>
Date: Sat, 7 Mar 2026 05:26:53 +0900
Subject: [PATCH] docs: use viewport height for split layouts (#8460)

---
 landing/app/careers/careers-client.tsx                 | 10 +++++-----
 landing/app/community/community-client.tsx             | 10 +++++-----
 landing/app/enterprise/enterprise-client.tsx           | 10 +++++-----
 .../app/products/[tab]/_components/products-shell.tsx  | 10 +++++-----
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/landing/app/careers/careers-client.tsx b/landing/app/careers/careers-client.tsx
index ceb8d151e0..db6143054a 100644
--- a/landing/app/careers/careers-client.tsx
+++ b/landing/app/careers/careers-client.tsx
@@ -420,11 +420,11 @@ export function CareersPageClient() {
 	>(null);
 
 	return (
-		<div className="relative h-full overflow-x-hidden pt-14 lg:pt-0">
-			<div className="relative text-foreground h-full">
-				<div className="flex flex-col lg:flex-row h-full">
+		<div className="relative min-h-dvh overflow-x-hidden pt-14 lg:h-dvh lg:overflow-hidden lg:pt-0">
+			<div className="relative text-foreground lg:h-full">
+				<div className="flex flex-col lg:h-full lg:flex-row">
 					{/* Left side */}
-					<div className="hidden lg:block relative w-full lg:w-[30%] border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-hidden px-5 sm:px-6 lg:px-10">
+					<div className="hidden lg:block relative w-full shrink-0 lg:w-[30%] lg:h-full border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-hidden px-5 sm:px-6 lg:px-10">
 						<div className="hidden lg:block">
 							<HalftoneBackground />
 						</div>
@@ -432,7 +432,7 @@ export function CareersPageClient() {
 					</div>
 
 					{/* Right side */}
-					<div className="relative w-full lg:w-[70%] overflow-y-auto overflow-x-hidden no-scrollbar">
+					<div className="relative w-full lg:w-[70%] lg:h-full lg:overflow-y-auto overflow-x-hidden no-scrollbar">
 						<div className="p-5 sm:p-6 lg:p-8 pt-8 lg:pt-16 pb-32 space-y-10">
 							{/* Mobile header */}
 							<div className="flex lg:hidden items-center gap-1.5">
diff --git a/landing/app/community/community-client.tsx b/landing/app/community/community-client.tsx
index b98b992f24..a9847131ef 100644
--- a/landing/app/community/community-client.tsx
+++ b/landing/app/community/community-client.tsx
@@ -401,11 +401,11 @@ function PlatformCard({
 
 export function CommunityPageClient({ stats }: { stats: CommunityStats }) {
 	return (
-		<div className="relative h-full overflow-x-hidden pt-14 lg:pt-0">
-			<div className="relative text-foreground h-full">
-				<div className="flex flex-col lg:flex-row h-full">
+		<div className="relative min-h-dvh overflow-x-hidden pt-14 lg:h-dvh lg:overflow-hidden lg:pt-0">
+			<div className="relative text-foreground lg:h-full">
+				<div className="flex flex-col lg:h-full lg:flex-row">
 					{/* Left side — Community hero */}
-					<div className="hidden lg:block relative w-full lg:w-[30%] border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-hidden px-5 sm:px-6 lg:px-10">
+					<div className="hidden lg:block relative w-full shrink-0 lg:w-[30%] lg:h-full border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-hidden px-5 sm:px-6 lg:px-10">
 						<div className="hidden lg:block">
 							<HalftoneBackground />
 						</div>
@@ -413,7 +413,7 @@ export function CommunityPageClient({ stats }: { stats: CommunityStats }) {
 					</div>
 
 					{/* Right side — Stats & platforms */}
-					<div className="relative w-full lg:w-[70%] overflow-y-auto overflow-x-hidden no-scrollbar">
+					<div className="relative w-full lg:w-[70%] lg:h-full lg:overflow-y-auto overflow-x-hidden no-scrollbar">
 						<div className="p-5 sm:p-6 lg:p-8 pt-8 lg:pt-16 pb-32 space-y-8">
 							{/* Mobile header */}
 							<div className="flex lg:hidden items-center gap-1.5">
diff --git a/landing/app/enterprise/enterprise-client.tsx b/landing/app/enterprise/enterprise-client.tsx
index ff099ef6cd..d445572657 100644
--- a/landing/app/enterprise/enterprise-client.tsx
+++ b/landing/app/enterprise/enterprise-client.tsx
@@ -130,11 +130,11 @@ export function EnterprisePageClient() {
 		});
 
 	return (
-		<div className="relative h-full overflow-x-hidden pt-14 lg:pt-0">
-			<div className="relative text-foreground h-full">
-				<div className="flex flex-col lg:flex-row h-full">
+		<div className="relative min-h-dvh overflow-x-hidden pt-14 lg:h-dvh lg:overflow-hidden lg:pt-0">
+			<div className="relative text-foreground lg:h-full">
+				<div className="flex flex-col lg:h-full lg:flex-row">
 					{/* Left side — Enterprise hero */}
-					<div className="hidden lg:block relative w-full lg:w-[40%] border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-y-auto overflow-x-hidden no-scrollbar px-5 sm:px-6 lg:px-10">
+					<div className="hidden lg:block relative w-full shrink-0 lg:w-[40%] lg:h-full border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-hidden px-5 sm:px-6 lg:px-10">
 						<div className="hidden lg:block">
 							<HalftoneBackground />
 						</div>
@@ -142,7 +142,7 @@ export function EnterprisePageClient() {
 					</div>
 
 					{/* Right side — Contact form */}
-					<div className="relative w-full lg:w-[60%] overflow-y-auto overflow-x-hidden no-scrollbar">
+					<div className="relative w-full lg:w-[60%] lg:h-full lg:overflow-y-auto overflow-x-hidden no-scrollbar">
 						<div className="p-5 sm:p-6 lg:p-8 pt-8 lg:pt-16 pb-32 space-y-8 ">
 							{/* Mobile header */}
 							<div className="flex lg:hidden items-center gap-1.5">
diff --git a/landing/app/products/[tab]/_components/products-shell.tsx b/landing/app/products/[tab]/_components/products-shell.tsx
index b6c136621e..95f4676c0f 100644
--- a/landing/app/products/[tab]/_components/products-shell.tsx
+++ b/landing/app/products/[tab]/_components/products-shell.tsx
@@ -201,11 +201,11 @@ export function ProductsShell({
 	const isInfrastructure = tab === "infrastructure";
 
 	return (
-		<div className="relative h-full overflow-x-hidden">
-			<div className="relative text-foreground h-full">
-				<div className="flex flex-col lg:flex-row h-full">
+		<div className="relative min-h-dvh overflow-x-hidden pt-14 lg:h-dvh lg:overflow-hidden lg:pt-0">
+			<div className="relative text-foreground lg:h-full">
+				<div className="flex flex-col lg:h-full lg:flex-row">
 					{/* Left side — Hero */}
-					<div className="hidden lg:block relative w-full lg:w-[30%] border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-hidden px-5 sm:px-6 lg:px-10">
+					<div className="hidden lg:block relative w-full shrink-0 lg:w-[30%] lg:h-full border-b lg:border-b-0 lg:border-r border-foreground/[0.06] overflow-hidden px-5 sm:px-6 lg:px-10">
 						<div className="hidden lg:block">
 							<HalftoneBackground />
 						</div>
@@ -237,7 +237,7 @@ export function ProductsShell({
 					</div>
 
 					{/* Right side — Content */}
-					<div className="relative w-full lg:w-[70%] overflow-y-auto overflow-x-hidden no-scrollbar">
+					<div className="relative w-full lg:w-[70%] lg:h-full lg:overflow-y-auto overflow-x-hidden no-scrollbar">
 						<div className="px-5 sm:px-6 lg:px-8 pt-16 lg:pt-16 pb-4">
 							<AnimatePresence mode="wait">
 								<motion.h2