From fe9b51309d689f6501a8e279c027ede8fea0b5a9 Mon Sep 17 00:00:00 2001
From: Jan Willem Mannaerts <jw.mannaerts@buckaroo.nl>
Date: Sat, 28 Feb 2026 16:10:44 +0100
Subject: [PATCH] Show desktop-only message on mobile devices

Pokerface is designed for desktop use. On screens below 768px, show
a simple message asking users to open on their PC or Mac. Legal
pages remain accessible on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/App.jsx | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 56fa66e..d2ae09e 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -20,6 +20,34 @@ function useDarkMode() {
   return [dark, () => setDark((d) => !d)];
 }
 
+function useMobileCheck() {
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768);
+  useEffect(() => {
+    const mq = window.matchMedia('(max-width: 767px)');
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+  return isMobile;
+}
+
+function MobileGate({ dark }) {
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center px-8 text-center"
+      style={{ background: dark ? '#09090b' : '#f0f1f5' }}>
+      <h1 className="font-syne text-2xl font-extrabold tracking-tight mb-4"
+        style={{ color: dark ? '#fff' : '#0f172a' }}>
+        POKERFACE
+      </h1>
+      <div className="w-10 h-px bg-emerald-500 mb-6" />
+      <p className="text-sm leading-relaxed max-w-xs"
+        style={{ color: dark ? '#94a3b8' : '#475569' }}>
+        Pokerface is designed for desktop use. Please open it on your PC or Mac for the best experience.
+      </p>
+    </div>
+  );
+}
+
 export default function App() {
   const [view, setView] = useState(() => {
     const legalPages = { '/terms': 'legal-terms', '/privacy': 'legal-privacy', '/support': 'legal-support' };
@@ -29,6 +57,7 @@ export default function App() {
   const [activeRoom, setActiveRoom] = useState(null);
   const [prevView, setPrevView] = useState('login');
   const [dark, toggleDark] = useDarkMode();
+  const isMobile = useMobileCheck();
 
   useEffect(() => {
     if (!view.startsWith('legal-')) checkAuth();
@@ -107,6 +136,10 @@ export default function App() {
     }} />;
   }
 
+  if (isMobile) {
+    return <MobileGate dark={dark} />;
+  }
+
   if (view === 'login') {
     return <LoginScreen dark={dark} toggleDark={toggleDark} onShowLegal={showLegal} />;
   }