feat: add "best viewed on desktop" tip modal for mobile visitors

Shows a dismissible glassmorphic modal on viewports <= 768px warning
that interactive visualizations work best on larger screens. Dismissed
state persists for the session via sessionStorage.

Author: GeneralJerel

apps/app/src/app/page.tsx

@@ -6,6 +6,7 @@ import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 import { ExplainerCardsPortal } from "@/components/explainer-cards";
 import { DemoGallery, type DemoItem } from "@/components/demo-gallery";
 import { GridIcon } from "@/components/demo-gallery/grid-icon";
+import { DesktopTipModal } from "@/components/desktop-tip-modal";
 import { CopilotChat, useAgent, useCopilotKit } from "@copilotkit/react-core/v2";
 
 export default function HomePage() {
@@ -115,6 +116,8 @@ export default function HomePage() {
         onClose={() => setDemoDrawerOpen(false)}
         onTryDemo={handleTryDemo}
       />
+
+      <DesktopTipModal />
     </>
   );
 }

apps/app/src/components/desktop-tip-modal.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const DISMISSED_KEY = "desktop-tip-dismissed";
+
+export function DesktopTipModal() {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    // Only show on narrow viewports and if not previously dismissed
+    const mq = window.matchMedia("(max-width: 768px)");
+    if (mq.matches && !sessionStorage.getItem(DISMISSED_KEY)) {
+      setVisible(true);
+    }
+  }, []);
+
+  if (!visible) return null;
+
+  const dismiss = () => {
+    sessionStorage.setItem(DISMISSED_KEY, "1");
+    setVisible(false);
+  };
+
+  return (
+    <div
+      onClick={dismiss}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0,0,0,0.45)",
+        backdropFilter: "blur(6px)",
+        WebkitBackdropFilter: "blur(6px)",
+        padding: 24,
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: "var(--color-glass-dark, rgba(255,255,255,0.9))",
+          backdropFilter: "blur(16px)",
+          WebkitBackdropFilter: "blur(16px)",
+          border: "1px solid var(--color-border-glass, rgba(255,255,255,0.3))",
+          borderRadius: "var(--radius-xl, 16px)",
+          boxShadow: "var(--shadow-glass, 0 4px 30px rgba(0,0,0,0.1))",
+          padding: "32px 28px",
+          maxWidth: 340,
+          width: "100%",
+          textAlign: "center" as const,
+          fontFamily: "var(--font-family)",
+        }}
+      >
+        {/* Monitor icon */}
+        <div
+          style={{
+            width: 56,
+            height: 56,
+            margin: "0 auto 20px",
+            borderRadius: 14,
+            background: "linear-gradient(135deg, rgba(190,194,255,0.15), rgba(133,224,206,0.12))",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <svg
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--color-lilac-dark, #9599CC)"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <rect x="2" y="3" width="20" height="14" rx="2" />
+            <path d="M8 21h8" />
+            <path d="M12 17v4" />
+          </svg>
+        </div>
+
+        <h2
+          style={{
+            fontSize: 18,
+            fontWeight: 700,
+            color: "var(--text-primary, #374151)",
+            margin: "0 0 8px",
+            letterSpacing: "-0.01em",
+          }}
+        >
+          Best viewed on desktop
+        </h2>
+
+        <p
+          style={{
+            fontSize: 14,
+            color: "var(--text-secondary, #6b7280)",
+            margin: "0 0 24px",
+            lineHeight: 1.5,
+          }}
+        >
+          This experience includes interactive visualizations that work best on larger screens.
+        </p>
+
+        <button
+          onClick={dismiss}
+          style={{
+            width: "100%",
+            padding: "10px 20px",
+            borderRadius: 999,
+            fontSize: 14,
+            fontWeight: 600,
+            fontFamily: "var(--font-family)",
+            color: "#fff",
+            background: "linear-gradient(135deg, var(--color-lilac-dark, #9599CC), var(--color-mint-dark, #1B936F))",
+            border: "none",
+            boxShadow: "0 1px 4px rgba(149,153,204,0.3)",
+            cursor: "pointer",
+          }}
+        >
+          Continue anyway
+        </button>
+      </div>
+    </div>
+  );
+}