button

components/CameraSetup.js

@@ -35,13 +35,12 @@ const CameraSetup = ({
           tracks.forEach(track => track.stop());
         }
         
-        // Get camera stream with better constraints
+        // Get camera stream
         const stream = await navigator.mediaDevices.getUserMedia({
           video: { 
             facingMode: facingMode,
-            width: { ideal: 1280 },
-            height: { ideal: 720 },
-            aspectRatio: { ideal: 4/3 }  // Add ideal aspect ratio
+            width: { ideal: 1920 },
+            height: { ideal: 1080 }
           },
           audio: false
         });
@@ -142,22 +141,6 @@ const CameraSetup = ({
       
       try {
         await videoRef.current.play();
-        
-        // Explicitly handle metadata loading after camera switch
-        videoRef.current.onloadedmetadata = () => {
-          if (!isMounted.current) return;
-          
-          const videoWidth = videoRef.current.videoWidth;
-          const videoHeight = videoRef.current.videoHeight;
-          const aspectRatio = videoWidth / videoHeight;
-          
-          // Update aspect ratio and canvas size
-          setVideoAspectRatio(aspectRatio);
-          updateCanvasSize(aspectRatio);
-          
-          console.log(`Camera switched with aspect ratio: ${aspectRatio}`);
-        };
-        
       } catch (playError) {
         console.log("Play interrupted during camera switch:", playError);
         // Don't treat play interruptions as fatal errors

components/MainContent.js

@@ -45,7 +45,7 @@ const MainContent = ({
         />
       )}
       
-      <div ref={containerRef} className={`relative w-full max-w-4xl canvas-container ${isMobile ? 'mt-0' : 'mt-4'}`}>
+      <div ref={containerRef} className="relative w-full max-w-4xl canvas-container">
         {/* Camera Setup */}
         <CameraSetup 
           videoRef={videoRef}
@@ -63,12 +63,7 @@ const MainContent = ({
         <canvas 
           ref={canvasRef} 
           className="rounded-lg shadow-lg w-full"
-          style={{ 
-            height: `${canvasHeight}px`,
-            maxHeight: isMobile ? '70vh' : 'none',
-            objectFit: 'cover',
-            objectPosition: 'center'
-          }}
+          style={{ height: `${canvasHeight}px` }}
           width={canvasWidth}
           height={canvasHeight}
         />

components/ThoughtBubble.js

@@ -127,14 +127,13 @@ const ThoughtBubble = ({
       };
     }
     
-    // Reduce the offset to position bubble closer to hand
-    const offset = isMobile ? 8 : 12; // Reduced from 12/20
+    const offset = isMobile ? 12 : 20; // Space between thumb and bubble
     
     if (isLeftHand) {
       // For left hand, position to the right of thumb
       return {
         position: 'absolute',
-        top: `${thumbPosition.y - (isMobile ? 10 : 15)}px`, // Reduced vertical offset
+        top: `${thumbPosition.y - (isMobile ? 20 : 30)}px`,
         left: `${thumbPosition.x + offset}px`,
         width: getBubbleWidth(),
         maxWidth: isThinking ? 'none' : `${canvasWidth - thumbPosition.x - (offset * 2)}px` // Prevent overflow
@@ -143,7 +142,7 @@ const ThoughtBubble = ({
       // For right hand, position to the left of thumb
       return {
         position: 'absolute',
-        top: `${thumbPosition.y - (isMobile ? 10 : 15)}px`, // Reduced vertical offset
+        top: `${thumbPosition.y - (isMobile ? 20 : 30)}px`,
         right: `${canvasWidth - thumbPosition.x + offset}px`,
         width: getBubbleWidth(),
         maxWidth: isThinking ? 'none' : `${thumbPosition.x - (offset * 2)}px` // Prevent overflow

hooks/useDeviceAndCanvas.js

@@ -45,14 +45,7 @@ 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);
-    
-    // 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;
-    }
+    const height = maxWidth / aspectRatio;
     
     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-2 z-50 shadow-sm">
+    <div className="fixed top-0 left-0 right-0 w-full bg-white p-4 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 text-sm md:text-base">
+        <div className="text-gray-500">
           <span className="text-black font-bold text-lg mr-2">HandSpew</span>
           Built with <a 
             href="https://ai.google.dev" 
@@ -42,12 +42,12 @@ export default function Home() {
       <Head>
         <title>HandSpew</title>
         <meta name="description" content="Generate thoughts based on hand gestures using MediaPipe and Gemini" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
         <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-2 md:p-4 bg-white font-['Google_Sans',sans-serif] pt-2 md:pt-4 overflow-y-auto">
+      <main className="flex min-h-screen flex-col items-center justify-center p-4 bg-white font-['Google_Sans',sans-serif] pt-20">
         <HandDetector />
       </main>
     </>

styles/globals.css

@@ -16,24 +16,10 @@
   }
 }
 
-html, body {
-  height: 100%;
-  overflow-x: hidden;
-  position: relative;
-}
-
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: 'Google Sans', Arial, Helvetica, sans-serif;
-  -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS */
-}
-
-/* Fix for iOS Safari 100vh issue */
-@supports (-webkit-touch-callout: none) {
-  .min-h-screen {
-    height: -webkit-fill-available;
-  }
 }
 
 /* Minimal thought bubble styling */
@@ -70,23 +56,6 @@ body {
   }
 }
 
-/* Canvas container styling */
-.canvas-container {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  border-radius: 12px; /* Add rounded corners */
-}
-
-.canvas-container canvas {
-  display: block;
-  width: 100%;
-  height: auto;
-  object-fit: cover; /* Changed from contain to cover */
-  border-radius: 12px; /* Match container */
-}
-
 /* Mobile-specific styles */
 @media (max-width: 767px) {
   .thought-bubble {
@@ -97,20 +66,4 @@ 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;
-  }
 }