feat: scrollable layout

apps/landing/src/app/(lab)/layout.tsx

@@ -1,13 +1,19 @@
-import Image from 'next/image';
+'use client';
+
+import Image from 'next/image';
+import { LabScrollProvider, useLabScroll } from '@/contexts/lab-scroll-context';
+
+const LabHeader = () => {
+  const { isScrolled } = useLabScroll();
 
-export default function LabLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
   return (
-    <>
+    <header
-      <header className="relative z-10 border-b border-white/10 backdrop-blur-sm">
+      className={`
+        relative z-10 border-b border-white/10 backdrop-blur-sm shrink-0
+        transition-all duration-300 ease-in-out
+        ${isScrolled ? 'h-0 opacity-0 overflow-hidden border-b-0' : 'h-16 opacity-100'}
+      `}
+    >
       <nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16">
         <div className="h-full flex items-center">
           <Image
@@ -27,8 +33,22 @@ export default function LabLayout({
         </a>
       </nav>
     </header>
+  );
+};
 
+export default function LabLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <LabScrollProvider>
+      <div className="h-screen overflow-hidden flex flex-col">
+        <LabHeader />
+        <div className="flex-1 min-h-0">
           {children}
-    </>
+        </div>
+      </div>
+    </LabScrollProvider>
   );
 }

apps/landing/src/components/layout/lab/LabLayout.tsx

@@ -19,28 +19,55 @@
  * - SubsectionNav at the top
  * - ApiKeyWidget in the right slot
  * - AnimatedBackground
+ *
+ * Scroll Detection:
+ * - Detects scroll in the main content area
+ * - After 50px threshold, collapses the main header via LabScrollContext
+ * - Height adjusts dynamically: 100vh-7rem (header visible) → 100vh-3rem (header hidden)
  */
 
-import { ReactNode } from 'react';
+import { ReactNode, useRef, useEffect, useCallback } from 'react';
 import { ThreeColumnLayout } from '@/components/layout/ThreeColumnLayout';
 import { LabSidebar } from './LabSidebar';
 import { LabFooter } from './LabFooter';
+import { useLabScroll } from '@/contexts/lab-scroll-context';
 
 type LabLayoutProps = {
   children: ReactNode;
 };
 
+const SCROLL_THRESHOLD = 50;
+
 export const LabLayout = ({ children }: LabLayoutProps) => {
+  const { isScrolled, setIsScrolled } = useLabScroll();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleScroll = useCallback(() => {
+    if (!contentRef.current) return;
+    const scrollTop = contentRef.current.scrollTop;
+    setIsScrolled(scrollTop > SCROLL_THRESHOLD);
+  }, [setIsScrolled]);
+
+  useEffect(() => {
+    const contentElement = contentRef.current;
+    if (!contentElement) return;
+
+    contentElement.addEventListener('scroll', handleScroll);
+    return () => contentElement.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  const containerHeight = isScrolled ? 'h-[calc(100vh-3rem)]' : 'h-[calc(100vh-7rem)]';
+
   return (
     <ThreeColumnLayout
       left={
-        <div className="border-r border-white/10 bg-slate-950/50 backdrop-blur-sm sticky top-12 h-[calc(100vh-3rem)] overflow-y-auto">
+        <div className={`border-r border-white/10 bg-slate-950/50 backdrop-blur-sm ${containerHeight} overflow-y-auto transition-all duration-300`}>
           <LabSidebar />
         </div>
       }
       center={
-        <div className="flex flex-col h-[calc(100vh-3rem)]">
+        <div className={`flex flex-col ${containerHeight} transition-all duration-300`}>
-          <div className="flex-1 overflow-y-auto">{children}</div>
+          <div ref={contentRef} className="flex-1 overflow-y-auto min-h-0">{children}</div>
           <LabFooter />
         </div>
       }

apps/landing/src/contexts/lab-scroll-context.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+/**
+ * Lab Scroll Context
+ *
+ * Shares scroll state between the main content area and the header.
+ * Used to collapse the main header when user scrolls in the lab section.
+ */
+
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+type LabScrollContextValue = {
+  isScrolled: boolean;
+  setIsScrolled: (value: boolean) => void;
+};
+
+const LabScrollContext = createContext<LabScrollContextValue | null>(null);
+
+export const useLabScroll = () => {
+  const context = useContext(LabScrollContext);
+  if (!context) {
+    throw new Error('useLabScroll must be used within LabScrollProvider');
+  }
+  return context;
+};
+
+type LabScrollProviderProps = {
+  children: ReactNode;
+};
+
+export const LabScrollProvider = ({ children }: LabScrollProviderProps) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  return (
+    <LabScrollContext.Provider value={{ isScrolled, setIsScrolled }}>
+      {children}
+    </LabScrollContext.Provider>
+  );
+};