shrink mobile canvas

components/MainContent.js

@@ -63,7 +63,10 @@ const MainContent = ({
         <canvas 
           ref={canvasRef} 
           className="rounded-lg shadow-lg w-full"
-          style={{ height: `${canvasHeight}px` }}
+          style={{ 
+            height: `${canvasHeight}px`,
+            ...(isMobile && { margin: '0 auto', display: 'block' })
+          }}
           width={canvasWidth}
           height={canvasHeight}
         />

hooks/useDeviceAndCanvas.js

@@ -45,9 +45,11 @@ 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;
+    // Apply 0.8 scale factor for mobile devices only
+    const scaledWidth = isMobile ? maxWidth * 0.8 : maxWidth;
+    const height = scaledWidth / aspectRatio;
     
-    setCanvasWidth(maxWidth);
+    setCanvasWidth(scaledWidth);
     setCanvasHeight(height);
   }, [isMobile]);