Update

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

@@ -5,31 +5,65 @@ const useResponsiveCanvas = (maxWidth = 350) => {
 
     const calculateScale = () => {
         const viewportWidth = window.innerWidth;
-        const padding = 0; // 16px padding on each side
-        const availableWidth = viewportWidth - padding;
 
+        // 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;
 
-        // Don't scale above 100% and ensure minimum scale for very small screens
-        setScale(Math.max(0.3, Math.min(newScale, 1)));
+        // Just cap at 100%, no minimum to avoid clipping
+        const finalScale = Math.min(newScale, 1);
+        setScale(finalScale);
     };
 
     useLayoutEffect(() => {
         calculateScale();
-    }, []);
+    }, [maxWidth]);
 
     useEffect(() => {
+        calculateScale();
+
         const handleResize = () => calculateScale();
 
+        // Multiple event listeners for better coverage
         window.addEventListener('resize', handleResize);
         window.addEventListener('orientationchange', handleResize);
 
+        // ResizeObserver for more reliable detection in dev tools
+        let resizeObserver;
+        if (window.ResizeObserver) {
+            resizeObserver = new ResizeObserver(calculateScale);
+            resizeObserver.observe(document.body);
+        }
+
+        // MutationObserver to catch when dev tools changes the viewport
+        let mutationObserver;
+        if (window.MutationObserver) {
+            mutationObserver = new MutationObserver(() => {
+                setTimeout(calculateScale, 50);
+            });
+            mutationObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['style']
+            });
+        }
+
         return () => {
             window.removeEventListener('resize', handleResize);
             window.removeEventListener('orientationchange', handleResize);
+            if (resizeObserver) resizeObserver.disconnect();
+            if (mutationObserver) mutationObserver.disconnect();
         };
-    }, []);
+    }, [maxWidth]);
 
     return scale;
 };
@@ -50,7 +84,7 @@ const EditorCanvas = ({maxWidth = 350}) => {
     };
 
     return (
-        <div className="mx-auto p-4">
+        <div className="w-full flex justify-center">
             <div
                 style={{
                     width: `${displayWidth}px`,
@@ -58,7 +92,7 @@ const EditorCanvas = ({maxWidth = 350}) => {
                 }}
             >
                 <div
-                    className="rounded-3xl bg-white shadow-sm origin-top-left"
+                    className="border rounded-3xl bg-white shadow-sm origin-top-left"
                     style={{
                         width: `${canvasWidth}px`,
                         height: `${canvasHeight}px`,