phase 1 complete

src/Index.tsx

@@ -1,25 +1,36 @@
 import { Stage, Layer, Circle } from "react-konva";
-
-const STAGE_SIZE = 0.6;
-const ASPECT_RATIO = 4 / 3;
+import { useEffect, useState } from "react";
 
 function Index() {
+    const [dimensions, setDimensions] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+
+    useEffect(() => {
+        const handleResize = () => {
+            setDimensions({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    // canvas fills the available space (accounting for sidebar width of 320px)
+    const canvasWidth = dimensions.width - 320;
+    const canvasHeight = dimensions.height;
+
     return (
-        <Stage
-            width={window.innerWidth * STAGE_SIZE * ASPECT_RATIO}
-            height={window.innerWidth * STAGE_SIZE}
-            className="border rounded-lg"
-        >
-            <Layer>
-                <Circle
-                    x={(window.innerWidth * STAGE_SIZE * ASPECT_RATIO) / 2}
-                    y={(window.innerWidth * STAGE_SIZE) / 2}
-                    radius={100}
-                    fill="#68d436"
-                    draggable
-                />
-            </Layer>
-        </Stage>
+        <>
+            <Stage width={canvasWidth} height={canvasHeight} className="">
+                <Layer>
+                    <Circle x={canvasWidth / 2} y={canvasHeight / 2} radius={100} fill="#68d436" draggable />
+                </Layer>
+            </Stage>
+        </>
     );
 }