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,
@@ -60,9 +68,9 @@ const useResponsiveWidth = (maxWidth = 350) => {
 };
 
 const Editor = () => {
-    const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
-    const maxWidth = 325;
-    const responsiveWidth = useResponsiveWidth(maxWidth);
+  const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
+  const maxWidth = 390;
+  const responsiveWidth = useResponsiveWidth(maxWidth);
 
   const handleEditClick = () => {
     setIsEditSidebarOpen(!isEditSidebarOpen)
@@ -81,8 +89,8 @@ const Editor = () => {
 
       <EditorHeader className="mx-auto" style={{ width: `${responsiveWidth}px` }} />
       <EditorCanvas maxWidth={maxWidth} />
-          <EditorControls
-              className="mx-auto"
+      <EditorControls
+        className="mx-auto"
         style={{ width: `${responsiveWidth}px` }}
         onEditClick={handleEditClick}
         isEditActive={isEditSidebarOpen}

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

@@ -1,38 +1,42 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 
+// Move calculation outside the hook for best performance
+const calculateResponsiveScale = (maxWidth) => {
+    const viewportWidth = window.innerWidth;
+
+    // Very aggressive padding reduction for small screens
+    let padding;
+    if (viewportWidth < 320) {
+        padding = 0; // Almost no padding on very small screens
+    } else if (viewportWidth < 400) {
+        padding = 0; // Minimal padding on small screens
+    } else {
+        padding = 0; // Normal padding on larger screens
+    }
+
+    const availableWidth = viewportWidth - padding;
+    const constrainedWidth = Math.min(availableWidth, maxWidth);
+    const newScale = constrainedWidth / 720;
+
+    // Just cap at 100%, no minimum to avoid clipping
+    return Math.min(newScale, 1);
+};
+
 const useResponsiveCanvas = (maxWidth = 350) => {
     const [scale, setScale] = useState(0.5);
 
-    const calculateScale = () => {
-        const viewportWidth = window.innerWidth;
-
-        // Very aggressive padding reduction for small screens
-        let padding;
-        if (viewportWidth < 320) {
-            padding = 0; // Almost no padding on very small screens
-        } else if (viewportWidth < 400) {
-            padding = 0; // Minimal padding on small screens
-        } else {
-            padding = 0; // Normal padding on larger screens
-        }
-
-        const availableWidth = viewportWidth - padding;
-        const constrainedWidth = Math.min(availableWidth, maxWidth);
-        const newScale = constrainedWidth / 720;
-
-        // Just cap at 100%, no minimum to avoid clipping
-        const finalScale = Math.min(newScale, 1);
-        setScale(finalScale);
-    };
-
     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,