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`,

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

@@ -10,19 +10,24 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
       <Button
         variant="ghost"
         size="icon"
-        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+        className="w-12 h-12 rounded-full shadow-sm border "
       >
         <Play className="h-8 w-8 " />
+          </Button>
+
+          <Button
+        variant="ghost"
+        size="icon"
+        className="w-12 h-12 rounded-full shadow-sm border "
+      >
+         <span className="text-sm font-medium ">9:16</span>
       </Button>
 
-      <div className="w-12 h-12 rounded-full bg-white shadow-sm border border-gray-100 flex items-center justify-center">
-        <span className="text-md font-medium ">9:16</span>
-      </div>
 
       <Button
         variant="ghost"
         size="icon"
-        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+        className="w-12 h-12 rounded-full shadow-sm border "
       >
         <Type className="h-8 w-8 " />
       </Button>
@@ -40,7 +45,7 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
       <Button
         variant="ghost"
         size="icon"
-        className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
+        className="w-12 h-12 rounded-full shadow-sm border "
       >
         <Download className="h-8 w-8 " />
       </Button>

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

@@ -7,7 +7,7 @@ const EditorHeader = (
     {className = ''}
 ) => {
   return (
-      <div className={cn("bg-white rounded-3xl p-4 flex items-center justify-between shadow-sm", className)}>
+      <div className={cn("bg-white rounded-3xl p-4 flex items-center justify-between shadow-sm w-full", className)}>
       <Button variant="outline" size="icon" className="rounded">
         <Menu className="h-8 w-8" />
       </Button>