Update

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,