mobile ratio fixes

components/CameraSetup.js

@@ -35,12 +35,13 @@ const CameraSetup = ({
           tracks.forEach(track => track.stop());
         }
         
-        // Get camera stream
+        // Get camera stream with better constraints
         const stream = await navigator.mediaDevices.getUserMedia({
           video: { 
             facingMode: facingMode,
-            width: { ideal: 1920 },
-            height: { ideal: 1080 }
+            width: { ideal: 1280 },
+            height: { ideal: 720 },
+            aspectRatio: { ideal: 4/3 }  // Add ideal aspect ratio
           },
           audio: false
         });

components/MainContent.js

@@ -66,7 +66,8 @@ const MainContent = ({
           style={{ 
             height: `${canvasHeight}px`,
             maxHeight: isMobile ? '70vh' : 'none',
-            objectFit: 'contain'
+            objectFit: 'cover',
+            objectPosition: 'center'
           }}
           width={canvasWidth}
           height={canvasHeight}

components/ThoughtBubble.js

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

styles/globals.css

@@ -76,13 +76,15 @@ body {
   width: 100%;
   max-width: 100%;
   overflow: hidden;
+  border-radius: 12px; /* Add rounded corners */
 }
 
 .canvas-container canvas {
   display: block;
   width: 100%;
   height: auto;
-  object-fit: contain;
+  object-fit: cover; /* Changed from contain to cover */
+  border-radius: 12px; /* Match container */
 }
 
 /* Mobile-specific styles */