Update

resources/js/modules/editor/editor.tsx

@@ -118,18 +118,22 @@ const Editor = () => {
 
       <EditorHeader className="mx-auto" style={{ width: `${responsiveWidth}px` }} />
 
-      {isBelowMinWidth ? (
-              <div className="flex-1 flex items-center justify-center px-4 bg-white h-full rounded-lg border shadow-lg">
+          {isBelowMinWidth ? (
+              <div className="aspect-[9/16]">
+              <div className="flex-1 flex items-center justify-center p-6 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!
+                          <div className="text-center">
+                              <div className="text-xl
+                               font-bold">YIKES 🥔</div>
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              You seem to be using a potato-sized screen. Please continue with desktop for a more refined experience!
             </p>
           </div>
                  </div>
-        </div>
+                  </div>
+                  </div>
       ) : (
         <>
           <EditorCanvas maxWidth={maxWidth} />

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

@@ -12,7 +12,7 @@ const EditorHeader = (
         <Menu className="h-8 w-8" />
       </Button>
 
-        <h1 className="text-xl font-display tracking-wide ml-3">MEMEAIGEN</h1>
+        <h1 className="text-lg md:text-xl font-display tracking-wide ml-0 md:ml-3">MEMEAIGEN</h1>
 
         <Button variant="outline" className="rounded inline-flex gap-1">
         <span className="text-sm font-semibold">100</span>