Update

resources/js/modules/editor/editor.tsx

@@ -13,6 +13,45 @@ const calculateResponsiveWidth = (maxWidth) => {
   return Math.min(availableWidth, maxWidth);
 };
 
+// Hook to detect if viewport is below minimum width
+const useViewportDetection = (minWidth = 375) => {
+  const [isBelowMinWidth, setIsBelowMinWidth] = useState(false);
+
+  useLayoutEffect(() => {
+    setIsBelowMinWidth(window.innerWidth < minWidth);
+  }, [minWidth]);
+
+  useEffect(() => {
+    const checkViewport = () => {
+      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.observe(document.body);
+    }
+
+    return () => {
+      window.removeEventListener('resize', checkViewport);
+      window.removeEventListener('orientationchange', checkViewport);
+      if (resizeObserver) resizeObserver.disconnect();
+    };
+  }, [minWidth]);
+
+  return isBelowMinWidth;
+};
+
 // Shared responsive hook
 const useResponsiveWidth = (maxWidth = 350) => {
   const [width, setWidth] = useState(350);
@@ -69,8 +108,9 @@ const useResponsiveWidth = (maxWidth = 350) => {
 
 const Editor = () => {
   const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
-  const maxWidth = 390;
+  const maxWidth = 340;
   const responsiveWidth = useResponsiveWidth(maxWidth);
+  const isBelowMinWidth = useViewportDetection(340);
 
   const handleEditClick = () => {
     setIsEditSidebarOpen(!isEditSidebarOpen)
@@ -88,13 +128,30 @@ const Editor = () => {
       <EditSidebar isOpen={isEditSidebarOpen} onClose={handleCloseSidebar} />
 
       <EditorHeader className="mx-auto" style={{ width: `${responsiveWidth}px` }} />
-      <EditorCanvas maxWidth={maxWidth} />
-      <EditorControls
-        className="mx-auto"
-        style={{ width: `${responsiveWidth}px` }}
-        onEditClick={handleEditClick}
-        isEditActive={isEditSidebarOpen}
-      />
+
+      {isBelowMinWidth ? (
+              <div className="flex-1 flex items-center justify-center px-4 bg-white h-full rounded-lg border shadow-lg">
+
+                  <div>
+                  <video className="mx-auto" width="100" height="100%" src="https://cdn.memeaigen.com/videos/cat%20asking%20for%20food.webm" autoPlay muted loop />
+          <div className="text-center">
+            <p className="text-gray-600 text-sm leading-relaxed">
+              Please continue with desktop for a more refined experience!
+            </p>
+          </div>
+                 </div>
+        </div>
+      ) : (
+        <>
+          <EditorCanvas maxWidth={maxWidth} />
+          <EditorControls
+            className="mx-auto"
+            style={{ width: `${responsiveWidth}px` }}
+            onEditClick={handleEditClick}
+            isEditActive={isEditSidebarOpen}
+          />
+        </>
+      )}
     </div>
   )
 }

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

@@ -5,19 +5,28 @@ const calculateResponsiveScale = (maxWidth) => {
     const viewportWidth = window.innerWidth;
 
     // 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
+    let padding = 0;
+
+    if (viewportWidth >= 340 && viewportWidth < 389) {
+        padding = 110;
     }
+    else if (viewportWidth >= 390 && viewportWidth < 409) {
+        padding = 60;
+    }
+    else if (viewportWidth >= 410 && viewportWidth < 767) {
+        padding = 40;
+    }
+    else if (viewportWidth >= 768) {
+        padding = 0;
+    }
+
+
 
     const availableWidth = viewportWidth - padding;
     const constrainedWidth = Math.min(availableWidth, maxWidth);
     const newScale = constrainedWidth / 720;
 
+
     // Just cap at 100%, no minimum to avoid clipping
     return Math.min(newScale, 1);
 };

resources/js/pages/home/home.tsx

@@ -2,7 +2,7 @@ import Editor from "@/modules/editor/editor";
 
 const Home = () => {
   return (
-    <div class="bg-neutral-50 h-screen">
+    <div class="bg-neutral-50 min-h-screen">
       <Editor />
     </div>
   );