mobile scroll

components/MainContent.js

@@ -45,7 +45,7 @@ const MainContent = ({
         />
       )}
       
-      <div ref={containerRef} className="relative w-full max-w-4xl canvas-container">
+      <div ref={containerRef} className={`relative w-full max-w-4xl canvas-container ${isMobile ? 'mt-0' : 'mt-4'}`}>
         {/* Camera Setup */}
         <CameraSetup 
           videoRef={videoRef}

hooks/useDeviceAndCanvas.js

@@ -45,7 +45,14 @@ const useDeviceAndCanvas = () => {
     const containerWidth = document.querySelector('.canvas-container')?.clientWidth || window.innerWidth;
     // Set maximum width for the canvas - increased for desktop
     const maxWidth = Math.min(containerWidth, isMobile ? 640 : 960);
-    const height = maxWidth / aspectRatio;
+    
+    // Calculate height based on aspect ratio, but reduce height on mobile
+    let height = maxWidth / aspectRatio;
+    
+    // For mobile, reduce the height by 25% to make it more compact
+    if (isMobile) {
+      height = height * 0.75;
+    }
     
     setCanvasWidth(maxWidth);
     setCanvasHeight(height);

pages/index.js

@@ -11,9 +11,9 @@ const inter = Inter({ subsets: ['latin'] });
 
 const Header = () => {
   return (
-    <div className="sticky top-0 left-0 right-0 w-full bg-white p-4 z-50 shadow-sm">
+    <div className="sticky top-0 left-0 right-0 w-full bg-white p-2 z-50 shadow-sm">
       <div className="w-full flex justify-between items-center text-base max-w-7xl mx-auto">
-        <div className="text-gray-500">
+        <div className="text-gray-500 text-sm md:text-base">
           <span className="text-black font-bold text-lg mr-2">HandSpew</span>
           Built with <a 
             href="https://ai.google.dev" 
@@ -47,7 +47,7 @@ export default function Home() {
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" />
       </Head>
       <Header />
-      <main className="flex flex-col items-center p-4 bg-white font-['Google_Sans',sans-serif] pt-20 overflow-y-auto">
+      <main className="flex flex-col items-center p-2 md:p-4 bg-white font-['Google_Sans',sans-serif] pt-2 md:pt-4 overflow-y-auto">
         <HandDetector />
       </main>
     </>

styles/globals.css

@@ -80,4 +80,20 @@ body {
     font-size: 12px;
     line-height: 1.3;
   }
+  
+  /* Compact layout for mobile */
+  .canvas-container {
+    margin-top: 0;
+  }
+  
+  /* Reduce spacing around elements on mobile */
+  .w-full {
+    margin-bottom: 0.5rem;
+  }
+  
+  /* Make header more compact on mobile */
+  .sticky {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
 }