Update

resources/js/components/custom/use-tailwind-breakpoint.jsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+// Hardcoded breakpoints based on your Tailwind config
+const breakpoints = {
+    xxxxs: 0,
+    xxxs: 275,
+    xxs: 320,
+    xs: 475,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1400,
+};
+
+const getCurrentBreakpoint = () => {
+    if (typeof window === 'undefined') return null; // Handle SSR
+
+    const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]);
+
+    return sortedBreakpoints.find(([_, width]) => window.innerWidth >= width)?.[0] || 'xxs';
+};
+
+const useTailwindBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = useState(null);
+
+    useEffect(() => {
+        const handleResize = () => {
+            setBreakpoint(getCurrentBreakpoint());
+        };
+
+        handleResize(); // Set initial breakpoint
+        window.addEventListener('resize', handleResize);
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    return breakpoint;
+};
+
+export default useTailwindBreakpoint;

resources/js/modules/editor/editor.tsx

@@ -1,14 +1,68 @@
-import { useState } from "react"
+import { useState, useEffect, useLayoutEffect } from "react"
 
 import EditSidebar from "./partials/edit-sidebar"
 import EditorCanvas from "./partials/editor-canvas"
-
 import EditorHeader from "./partials/editor-header"
 import EditorControls from "./partials/editor-controls"
 
+// 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();
+  }, [maxWidth]);
+
+  useEffect(() => {
+    calculateWidth();
+
+    const handleResize = () => calculateWidth();
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('orientationchange', handleResize);
+
+    // ResizeObserver for more reliable detection
+    let resizeObserver;
+    if (window.ResizeObserver) {
+      resizeObserver = new ResizeObserver(calculateWidth);
+      resizeObserver.observe(document.body);
+    }
+
+    // MutationObserver for dev tools
+    let mutationObserver;
+    if (window.MutationObserver) {
+      mutationObserver = new MutationObserver(() => {
+        setTimeout(calculateWidth, 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 width;
+};
+
 const Editor = () => {
     const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
-    const maxWidth = 350;
+    const maxWidth = 325;
+    const responsiveWidth = useResponsiveWidth(maxWidth);
 
   const handleEditClick = () => {
     setIsEditSidebarOpen(!isEditSidebarOpen)
@@ -18,18 +72,23 @@ const Editor = () => {
     setIsEditSidebarOpen(false)
   }
 
-
-
   return (
-    <div className="max-w-sm mx-auto min-h-screen flex flex-col relative space-y-4 py-6">
+    <div
+      className="mx-auto min-h-screen flex flex-col relative space-y-4 py-6"
+      style={{ width: `${responsiveWidth}px` }}
+    >
       <EditSidebar isOpen={isEditSidebarOpen} onClose={handleCloseSidebar} />
 
-      <EditorHeader className="max-width-[350px]" />
+      <EditorHeader className="mx-auto" style={{ width: `${responsiveWidth}px` }} />
       <EditorCanvas maxWidth={maxWidth} />
-      <EditorControls className="max-width-[350px]" onEditClick={handleEditClick} isEditActive={isEditSidebarOpen} />
+          <EditorControls
+              className="mx-auto"
+        style={{ width: `${responsiveWidth}px` }}
+        onEditClick={handleEditClick}
+        isEditActive={isEditSidebarOpen}
+      />
     </div>
   )
 }
 
-
 export default Editor;

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
+        // Just cap at 100%, no minimum to avoid clipping
-        setScale(Math.max(0.3, Math.min(newScale, 1)));
+        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>