From aa330f74b3f496d6fe2ee9bca5082e45f6c1e301 Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Mon, 17 Nov 2025 15:18:29 +0900
Subject: [PATCH] fix: Preserve state when resizing window to mobile size

Change mobile warning from unmounting components to showing an overlay.
This prevents losing diagram and chat state when window is resized.
---
 app/page.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 4cc67fb..e1ef22e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -40,20 +40,19 @@ export default function Home() {
         };
     }, []);
 
-    if (isMobile) {
-        return (
-            <div className="flex items-center justify-center h-screen bg-gray-100">
-                <div className="text-center p-8">
-                    <h1 className="text-2xl font-semibold text-gray-800">
-                        Please open this application on a desktop or laptop
-                    </h1>
-                </div>
-            </div>
-        );
-    }
-
     return (
-        <div className="flex h-screen bg-gray-100">
+        <div className="flex h-screen bg-gray-100 relative">
+            {/* Mobile warning overlay - keeps components mounted */}
+            {isMobile && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-gray-100">
+                    <div className="text-center p-8">
+                        <h1 className="text-2xl font-semibold text-gray-800">
+                            Please open this application on a desktop or laptop
+                        </h1>
+                    </div>
+                </div>
+            )}
+
             <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
                 <DrawIoEmbed
                     ref={drawioRef}