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>
   )
 }