Update

resources/js/modules/editor/editor.tsx

@@ -5,26 +5,30 @@ import EditorCanvas from "./partials/editor-canvas"
 import EditorHeader from "./partials/editor-header"
 import EditorControls from "./partials/editor-controls"
 
+// Move calculation outside the hook for best performance
+const calculateResponsiveWidth = (maxWidth) => {
+  const viewportWidth = window.innerWidth;
+  const padding = 32;
+  const availableWidth = viewportWidth - padding;
+  return Math.min(availableWidth, maxWidth);
+};
+
 // Shared responsive hook
 const useResponsiveWidth = (maxWidth = 350) => {
   const [width, setWidth] = useState(350);
 
-  const calculateWidth = () => {
-    const viewportWidth = window.innerWidth;
-    const padding = 32;
-    const availableWidth = viewportWidth - padding;
-    const constrainedWidth = Math.min(availableWidth, maxWidth);
-    setWidth(constrainedWidth);
-  };
-
   useLayoutEffect(() => {
-    calculateWidth();
+    setWidth(calculateResponsiveWidth(maxWidth));
   }, [maxWidth]);
 
   useEffect(() => {
-    calculateWidth();
+    // Update immediately
+    setWidth(calculateResponsiveWidth(maxWidth));
 
-    const handleResize = () => calculateWidth();
+    // Create event handlers inside effect to avoid dependency issues
+    const handleResize = () => {
+      setWidth(calculateResponsiveWidth(maxWidth));
+    };
 
     window.addEventListener('resize', handleResize);
     window.addEventListener('orientationchange', handleResize);
@@ -32,7 +36,9 @@ const useResponsiveWidth = (maxWidth = 350) => {
     // ResizeObserver for more reliable detection
     let resizeObserver;
     if (window.ResizeObserver) {
-      resizeObserver = new ResizeObserver(calculateWidth);
+      resizeObserver = new ResizeObserver(() => {
+        setWidth(calculateResponsiveWidth(maxWidth));
+      });
       resizeObserver.observe(document.body);
     }
 
@@ -40,7 +46,9 @@ const useResponsiveWidth = (maxWidth = 350) => {
     let mutationObserver;
     if (window.MutationObserver) {
       mutationObserver = new MutationObserver(() => {
-        setTimeout(calculateWidth, 50);
+        setTimeout(() => {
+          setWidth(calculateResponsiveWidth(maxWidth));
+        }, 50);
       });
       mutationObserver.observe(document.documentElement, {
         attributes: true,
@@ -61,7 +69,7 @@ const useResponsiveWidth = (maxWidth = 350) => {
 
 const Editor = () => {
   const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
-    const maxWidth = 325;
+  const maxWidth = 390;
   const responsiveWidth = useResponsiveWidth(maxWidth);
 
   const handleEditClick = () => {

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

@@ -1,9 +1,7 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 
-const useResponsiveCanvas = (maxWidth = 350) => {
-    const [scale, setScale] = useState(0.5);
-
-    const calculateScale = () => {
+// Move calculation outside the hook for best performance
+const calculateResponsiveScale = (maxWidth) => {
     const viewportWidth = window.innerWidth;
 
     // Very aggressive padding reduction for small screens
@@ -21,18 +19,24 @@ const useResponsiveCanvas = (maxWidth = 350) => {
     const newScale = constrainedWidth / 720;
 
     // Just cap at 100%, no minimum to avoid clipping
-        const finalScale = Math.min(newScale, 1);
-        setScale(finalScale);
-    };
+    return Math.min(newScale, 1);
+};
+
+const useResponsiveCanvas = (maxWidth = 350) => {
+    const [scale, setScale] = useState(0.5);
 
     useLayoutEffect(() => {
-        calculateScale();
+        setScale(calculateResponsiveScale(maxWidth));
     }, [maxWidth]);
 
     useEffect(() => {
-        calculateScale();
+        // Update immediately
+        setScale(calculateResponsiveScale(maxWidth));
 
-        const handleResize = () => calculateScale();
+        // Create event handlers inside effect
+        const handleResize = () => {
+            setScale(calculateResponsiveScale(maxWidth));
+        };
 
         // Multiple event listeners for better coverage
         window.addEventListener('resize', handleResize);
@@ -41,7 +45,9 @@ const useResponsiveCanvas = (maxWidth = 350) => {
         // ResizeObserver for more reliable detection in dev tools
         let resizeObserver;
         if (window.ResizeObserver) {
-            resizeObserver = new ResizeObserver(calculateScale);
+            resizeObserver = new ResizeObserver(() => {
+                setScale(calculateResponsiveScale(maxWidth));
+            });
             resizeObserver.observe(document.body);
         }
 
@@ -49,7 +55,9 @@ const useResponsiveCanvas = (maxWidth = 350) => {
         let mutationObserver;
         if (window.MutationObserver) {
             mutationObserver = new MutationObserver(() => {
-                setTimeout(calculateScale, 50);
+                setTimeout(() => {
+                    setScale(calculateResponsiveScale(maxWidth));
+                }, 50);
             });
             mutationObserver.observe(document.documentElement, {
                 attributes: true,