Update

resources/js/modules/editor/partials/editor-canvas.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect, useLayoutEffect } from 'react';
+
+const useResponsiveCanvas = (maxWidth = 350) => {
+    const [scale, setScale] = useState(0.5);
+
+    const calculateScale = () => {
+        const viewportWidth = window.innerWidth;
+        const padding = 0; // 16px padding on each side
+        const availableWidth = viewportWidth - padding;
+
+        const constrainedWidth = Math.min(availableWidth, maxWidth);
+        const newScale = constrainedWidth / 720;
+
+        // Don't scale above 100% and ensure minimum scale for very small screens
+        setScale(Math.max(0.3, Math.min(newScale, 1)));
+    };
+
+    useLayoutEffect(() => {
+        calculateScale();
+    }, []);
+
+    useEffect(() => {
+        const handleResize = () => calculateScale();
+
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('orientationchange', handleResize);
+        };
+    }, []);
+
+    return scale;
+};
+
+const EditorCanvas = ({maxWidth = 350}) => {
+    const scale = useResponsiveCanvas(maxWidth);
+    const canvasWidth = 720;
+    const canvasHeight = 1280;
+    const displayWidth = canvasWidth * scale;
+    const displayHeight = canvasHeight * scale;
+
+    const convertCoordinates = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        return {
+            x: (e.clientX - rect.left) / scale,
+            y: (e.clientY - rect.top) / scale
+        };
+    };
+
+    return (
+        <div className="mx-auto p-4">
+            <div
+                style={{
+                    width: `${displayWidth}px`,
+                    height: `${displayHeight}px`,
+                }}
+            >
+                <div
+                    className="rounded-3xl bg-white shadow-sm origin-top-left"
+                    style={{
+                        width: `${canvasWidth}px`,
+                        height: `${canvasHeight}px`,
+                        transform: `scale(${scale})`,
+                    }}
+                    onClick={(e) => {
+                        const { x, y } = convertCoordinates(e);
+                        // Handle your canvas interactions here
+                        // x, y are the actual canvas coordinates (0-720, 0-1280)
+                    }}
+                >
+                    {/* Your canvas content goes here */}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default EditorCanvas;