From 9ca221b63b8fa840b251b68a705272748f288fbf Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Wed, 28 May 2025 22:57:57 +0800
Subject: [PATCH] Update

---
 resources/js/modules/editor/editor.tsx           | 16 ++++++++++------
 .../js/modules/editor/partials/editor-header.tsx |  2 +-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/resources/js/modules/editor/editor.tsx b/resources/js/modules/editor/editor.tsx
index 938e423..01d2fa5 100644
--- a/resources/js/modules/editor/editor.tsx
+++ b/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} />
diff --git a/resources/js/modules/editor/partials/editor-header.tsx b/resources/js/modules/editor/partials/editor-header.tsx
index 0de1681..4776478 100644
--- a/resources/js/modules/editor/partials/editor-header.tsx
+++ b/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>