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

@@ -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">