fix

components/CameraSetup.js

@@ -35,19 +35,15 @@ const CameraSetup = ({
           tracks.forEach(track => track.stop());
         }
         
-        // Set camera constraints based on device type
-        const constraints = {
-          video: {
+        // Get camera stream
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { 
             facingMode: facingMode,
-            width: { ideal: isMobile ? 1280 : 1920 },
-            height: { ideal: isMobile ? 720 : 1080 },
-            aspectRatio: isMobile ? { ideal: 4/3 } : undefined // Prefer 4:3 on mobile
+            width: { ideal: 1920 },
+            height: { ideal: 1080 }
           },
           audio: false
-        };
-        
-        // Get camera stream
-        const stream = await navigator.mediaDevices.getUserMedia(constraints);
+        });
         
         // Check if component is still mounted before continuing
         if (!isMounted.current) {
@@ -75,9 +71,6 @@ const CameraSetup = ({
           const videoWidth = videoRef.current.videoWidth;
           const videoHeight = videoRef.current.videoHeight;
           const aspectRatio = videoWidth / videoHeight;
-          
-          console.log(`Camera dimensions: ${videoWidth}x${videoHeight}, aspect ratio: ${aspectRatio}`);
-          
           setVideoAspectRatio(aspectRatio);
           
           // Update canvas size with the correct aspect ratio
@@ -110,7 +103,7 @@ const CameraSetup = ({
         tracks.forEach(track => track.stop());
       }
     };
-  }, [videoRef, canvasRef, containerRef, facingMode, setCameraError, setVideoAspectRatio, updateCanvasSize, isMobile]);
+  }, [videoRef, canvasRef, containerRef, facingMode, setCameraError, setVideoAspectRatio, updateCanvasSize]);
 
   // Function to switch camera
   const switchCamera = async () => {
@@ -133,9 +126,8 @@ const CameraSetup = ({
       const stream = await navigator.mediaDevices.getUserMedia({
         video: { 
           facingMode: newFacingMode,
-          width: { ideal: isMobile ? 1280 : 1920 },
-          height: { ideal: isMobile ? 720 : 1080 },
-          aspectRatio: isMobile ? { ideal: 4/3 } : undefined
+          width: { ideal: 1920 },
+          height: { ideal: 1080 }
         },
         audio: false
       });
@@ -193,7 +185,7 @@ const CameraSetup = ({
           <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 9l-6 6" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.5 7.5L9.5 12.5" />
           </svg>
         </button>
       )}

components/HandDetector.js

@@ -12,8 +12,8 @@ const HandDetector = () => {
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   
-  // Camera state - Set default to 'environment' (back camera) for mobile
-  const [facingMode, setFacingMode] = useState('environment');
+  // Camera state
+  const [facingMode, setFacingMode] = useState('user'); // 'user' for front camera, 'environment' for back camera
   const [cameraError, setCameraError] = useState(false);
   
   // Prompt state

components/MainContent.js

@@ -59,12 +59,8 @@ const MainContent = ({
         {/* Canvas for hand detection */}
         <canvas 
           ref={canvasRef} 
-          className="rounded-lg shadow-lg w-full object-contain"
-          style={{ 
-            height: `${canvasHeight}px`,
-            maxHeight: isMobile ? '70vh' : 'none',
-            objectFit: 'contain'
-          }}
+          className="rounded-lg shadow-lg w-full"
+          style={{ height: `${canvasHeight}px` }}
           width={canvasWidth}
           height={canvasHeight}
         />

components/PromptEditor.js

@@ -66,7 +66,7 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
           </div>
         </div>
       ) : (
-        <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs md:text-sm text-gray-800 whitespace-pre-wrap">
+        <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-800 whitespace-pre-wrap">
           {customPrompt}
         </div>
       )}

hooks/useDeviceAndCanvas.js

@@ -43,35 +43,12 @@ const useDeviceAndCanvas = () => {
     if (!isComponentMounted.current) return;
     
     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;
     
-    // Scale down for mobile devices
-    let maxWidth;
-    if (isMobile) {
-      // On mobile, use a smaller canvas size to prevent it from being too tall
-      maxWidth = Math.min(containerWidth, 400);
-      
-      // Ensure we maintain the correct aspect ratio
-      // For mobile, we want to ensure the height isn't too tall
-      // Most phone cameras have aspect ratios around 4:3 or 16:9
-      // If the aspect ratio is very wide or very tall, we'll normalize it
-      let normalizedAspectRatio = aspectRatio;
-      
-      // If aspect ratio is extreme, normalize it to prevent stretching
-      if (aspectRatio < 0.5) normalizedAspectRatio = 0.5; // Very tall
-      if (aspectRatio > 2) normalizedAspectRatio = 2; // Very wide
-      
-      const height = maxWidth / normalizedAspectRatio;
-      
-      setCanvasWidth(maxWidth);
-      setCanvasHeight(height);
-    } else {
-      // On desktop, use a larger canvas size
-      maxWidth = Math.min(containerWidth, 960);
-      const height = maxWidth / aspectRatio;
-      
-      setCanvasWidth(maxWidth);
-      setCanvasHeight(height);
-    }
+    setCanvasWidth(maxWidth);
+    setCanvasHeight(height);
   }, [isMobile]);
   
   return {

pages/index.js

@@ -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 min-h-screen flex-col items-center justify-start p-4 bg-white font-['Google_Sans',sans-serif] pt-20 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,39 +16,10 @@
   }
 }
 
-html, body {
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: 'Google Sans', Arial, Helvetica, sans-serif;
-  position: relative;
-}
-
-/* Canvas container styling */
-.canvas-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.canvas-container canvas {
-  object-fit: contain;
-  max-width: 100%;
-  height: auto;
-  aspect-ratio: auto;
-}
-
-/* Prevent stretching on mobile */
-@media (max-width: 767px) {
-  .canvas-container canvas {
-    max-height: 70vh;
-  }
 }
 
 /* Minimal thought bubble styling */