Update

resources/js/modules/editor/editor.tsx

@@ -4,17 +4,10 @@ import EditSidebar from "./partials/edit-sidebar"
 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);
-};
+import { calculateOptimalMaxWidth, calculateResponsiveWidth } from "./utils/layout-constants"
 
 // Hook to detect if viewport is below minimum width
-const useViewportDetection = (minWidth = 375) => {
+const useViewportDetection = (minWidth = 320) => {
   const [isBelowMinWidth, setIsBelowMinWidth] = useState(false);
 
   useLayoutEffect(() => {
@@ -26,19 +19,13 @@ const useViewportDetection = (minWidth = 375) => {
       setIsBelowMinWidth(window.innerWidth < minWidth);
     };
 
-    // Update immediately
     checkViewport();
-
-    // Event listeners
     window.addEventListener('resize', checkViewport);
     window.addEventListener('orientationchange', checkViewport);
 
-    // ResizeObserver for more reliable detection
     let resizeObserver;
     if (window.ResizeObserver) {
-      resizeObserver = new ResizeObserver(() => {
-        checkViewport();
-      });
+      resizeObserver = new ResizeObserver(checkViewport);
       resizeObserver.observe(document.body);
     }
 
@@ -52,42 +39,45 @@ const useViewportDetection = (minWidth = 375) => {
   return isBelowMinWidth;
 };
 
-// Shared responsive hook
-const useResponsiveWidth = (maxWidth = 350) => {
-  const [width, setWidth] = useState(350);
+// Hook for responsive dimensions
+const useResponsiveDimensions = () => {
+  const [dimensions, setDimensions] = useState(() => ({
+    maxWidth: calculateOptimalMaxWidth(),
+    responsiveWidth: calculateResponsiveWidth()
+  }));
 
   useLayoutEffect(() => {
-    setWidth(calculateResponsiveWidth(maxWidth));
-  }, [maxWidth]);
+    const newMaxWidth = calculateOptimalMaxWidth();
+    const newResponsiveWidth = calculateResponsiveWidth();
+    setDimensions({
+      maxWidth: newMaxWidth,
+      responsiveWidth: newResponsiveWidth
+    });
+  }, []);
 
   useEffect(() => {
-    // Update immediately
-    setWidth(calculateResponsiveWidth(maxWidth));
-
-    // Create event handlers inside effect to avoid dependency issues
     const handleResize = () => {
-      setWidth(calculateResponsiveWidth(maxWidth));
+      const newMaxWidth = calculateOptimalMaxWidth();
+      const newResponsiveWidth = calculateResponsiveWidth();
+      setDimensions({
+        maxWidth: newMaxWidth,
+        responsiveWidth: newResponsiveWidth
+      });
     };
 
     window.addEventListener('resize', handleResize);
     window.addEventListener('orientationchange', handleResize);
 
-    // ResizeObserver for more reliable detection
     let resizeObserver;
     if (window.ResizeObserver) {
-      resizeObserver = new ResizeObserver(() => {
-        setWidth(calculateResponsiveWidth(maxWidth));
-      });
+      resizeObserver = new ResizeObserver(handleResize);
       resizeObserver.observe(document.body);
     }
 
-    // MutationObserver for dev tools
     let mutationObserver;
     if (window.MutationObserver) {
       mutationObserver = new MutationObserver(() => {
-        setTimeout(() => {
-          setWidth(calculateResponsiveWidth(maxWidth));
-        }, 50);
+        setTimeout(handleResize, 50);
       });
       mutationObserver.observe(document.documentElement, {
         attributes: true,
@@ -101,16 +91,15 @@ const useResponsiveWidth = (maxWidth = 350) => {
       if (resizeObserver) resizeObserver.disconnect();
       if (mutationObserver) mutationObserver.disconnect();
     };
-  }, [maxWidth]);
+  }, []);
 
-  return width;
+  return dimensions;
 };
 
 const Editor = () => {
   const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
-  const maxWidth = 340;
-  const responsiveWidth = useResponsiveWidth(maxWidth);
-  const isBelowMinWidth = useViewportDetection(340);
+  const { maxWidth, responsiveWidth } = useResponsiveDimensions();
+  const isBelowMinWidth = useViewportDetection(320);
 
   const handleEditClick = () => {
     setIsEditSidebarOpen(!isEditSidebarOpen)
@@ -122,7 +111,7 @@ const Editor = () => {
 
   return (
     <div
-      className="mx-auto min-h-screen flex flex-col relative space-y-4 py-6"
+      className="mx-auto min-h-screen flex flex-col relative space-y-2 py-4"
       style={{ width: `${responsiveWidth}px` }}
     >
       <EditSidebar isOpen={isEditSidebarOpen} onClose={handleCloseSidebar} />