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}