mobile scroll

components/CameraSetup.js

@@ -141,6 +141,22 @@ 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

@@ -63,7 +63,11 @@ const MainContent = ({
         <canvas 
           ref={canvasRef} 
           className="rounded-lg shadow-lg w-full"
-          style={{ height: `${canvasHeight}px` }}
+          style={{ 
+            height: `${canvasHeight}px`,
+            maxHeight: isMobile ? '70vh' : 'none',
+            objectFit: 'contain'
+          }}
           width={canvasWidth}
           height={canvasHeight}
         />

styles/globals.css

@@ -70,6 +70,21 @@ body {
   }
 }
 
+/* Canvas container styling */
+.canvas-container {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.canvas-container canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
 /* Mobile-specific styles */
 @media (max-width: 767px) {
   .thought-bubble {