From 93d02a8d4434dce06f5d8a83d1c0ae381164d469 Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Mon, 10 Nov 2025 09:25:56 +0900
Subject: [PATCH] feat: add mobile detection with desktop-only message

Add responsive detection to show a message prompting users to access the application from desktop or laptop when viewing on mobile devices (screen width < 768px)
---
 app/page.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index af14beb..6bf5518 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,39 @@
 "use client";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { DrawIoEmbed } from "react-drawio";
 import ChatPanel from "@/components/chat-panel";
 import { useDiagram } from "@/contexts/diagram-context";
 
 export default function Home() {
     const { drawioRef, handleDiagramExport } = useDiagram();
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+
+        // Check on mount
+        checkMobile();
+
+        // Add event listener for resize
+        window.addEventListener("resize", checkMobile);
+
+        // Cleanup
+        return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+
+    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">