Changes

src/pages/Breakout.tsx

@@ -62,7 +62,12 @@ const Breakout = () => {
       if (height > maxHeight) { height = maxHeight; width = height * aspectRatio; }
       return { width: Math.floor(width), height: Math.floor(height) };
     }
-    return isFullscreen ? { width: 600, height: 720 } : { width: 480, height: 580 };
+    // Desktop: maximize based on available height
+    const availableHeight = window.innerHeight - 100;
+    const aspectRatio = 480 / 580;
+    const height = Math.min(availableHeight, 700);
+    const width = Math.floor(height * aspectRatio);
+    return { width, height };
   }, [isFullscreen]);
 
   const [canvasSize, setCanvasSize] = useState(getCanvasSize);
@@ -261,7 +266,7 @@ const Breakout = () => {
         </button>
       </div>
 
-      <div className={`flex ${isMobile ? 'flex-col items-center' : 'flex-row gap-4'} flex-1 ${isFullscreen ? 'justify-center items-center' : ''}`}>
+      <div className={`flex ${isMobile ? 'flex-col items-center' : 'flex-row gap-4 items-start justify-center'} flex-1`}>
         <div className="border-2 border-primary box-glow bg-background/80">
           <canvas ref={canvasRef} width={canvasSize.width} height={canvasSize.height} onTouchMove={handleTouchMove} className="block" />
         </div>