docs: use viewport height for split layouts (#8460)

This commit is contained in:
Taesu
2026-03-06 12:29:34 -08:00
committed by Alex Yang
parent 1801946dae
commit 7fefc2bbed
4 changed files with 20 additions and 20 deletions
+5 -5
View File
@@ -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">
+5 -5
View File
@@ -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">
+5 -5
View File
@@ -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">
@@ -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