Fix mobile responsive layout

src/__tests__/GoogleOAuthButton.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
 
 const MockApiError = vi.hoisted(() =>
   class extends Error {
@@ -24,11 +24,11 @@ vi.mock('@/lib/api-client', () => ({
   ApiError: MockApiError,
 }));
 
-// ── Import after mocks ────────────────────────────────────────────────────────
+// -- Import after mocks --------------------------------------------------------
 
 import { GoogleOAuthButton } from '@/features/auth/GoogleOAuthButton';
 
-// ── Google GIS mock helpers ───────────────────────────────────────────────────
+// -- Google GIS mock helpers ---------------------------------------------------
 
 function setupGoogleMock() {
   const mockPrompt = vi.fn();
@@ -56,7 +56,7 @@ afterEach(() => {
   clearGoogleMock();
 });
 
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
 
 describe('GoogleOAuthButton', () => {
   it('renders the Google sign-in button', () => {

src/__tests__/ResetPasswordPage.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach } from 'vitest';
 import { ResetPasswordPage } from '@/features/auth/ResetPasswordPage';
 
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
 
 const MockApiError = vi.hoisted(() =>
   class extends Error {
@@ -36,7 +36,7 @@ vi.mock('@/lib/routes', () => ({
   ROUTES: { login: '/login', dashboard: '/dashboard' },
 }));
 
-// ── Helpers ───────────────────────────────────────────────────────────────────
+// -- Helpers -------------------------------------------------------------------
 
 function renderPage(token = 'valid-token') {
   return render(<ResetPasswordPage token={token} />);
@@ -47,7 +47,7 @@ beforeEach(() => {
   mockResetPassword.mockResolvedValue(undefined);
 });
 
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
 
 describe('ResetPasswordPage', () => {
   it('renders the form with disabled submit when token is missing', () => {

src/__tests__/VerifyEmailConfirmPage.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-// ── Mocks ─────────────────────────────────────────────────────────────────────
+// -- Mocks ---------------------------------------------------------------------
 
 const MockApiError = vi.hoisted(() =>
   class extends Error {
@@ -35,7 +35,7 @@ vi.mock('@/lib/routes', () => ({
   ROUTES: { dashboard: '/dashboard', login: '/login', verifyEmail: '/verify-email' },
 }));
 
-// ── Import after mocks ────────────────────────────────────────────────────────
+// -- Import after mocks --------------------------------------------------------
 
 import { VerifyEmailConfirmPage } from '@/features/auth/VerifyEmailConfirmPage';
 
@@ -48,7 +48,7 @@ afterEach(() => {
   vi.useRealTimers();
 });
 
-// ── Tests ─────────────────────────────────────────────────────────────────────
+// -- Tests ---------------------------------------------------------------------
 
 describe('VerifyEmailConfirmPage', () => {
   it('shows verifying spinner immediately', () => {

src/__tests__/mobileResponsive.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const css = readFileSync(join(process.cwd(), 'src/styles/globals.css'), 'utf8');
+
+describe('mobile responsive safety rules', () => {
+  it('keeps app shell and page containers constrained on small screens', () => {
+    expect(css).toContain('max-width: 100vw');
+    expect(css).toContain('.app__main');
+    expect(css).toContain('min-width: 0');
+    expect(css).toContain('@media (max-width: 720px)');
+    expect(css).toContain('.app__sidebar { display: none; }');
+    expect(css).toContain('.bottomnav { display: flex; }');
+  });
+
+  it('stacks major desktop grids and converts wide rows for mobile', () => {
+    expect(css).toContain('.responsive-split');
+    expect(css).toContain('.responsive-sidebar');
+    expect(css).toContain('.responsive-room');
+    expect(css).toContain('grid-template-columns: minmax(0, 1fr) !important');
+    expect(css).toContain('.leaderboard-row');
+    expect(css).toContain('.match-history-row');
+    expect(css).toContain('.friends-row');
+  });
+
+  it('keeps dropdowns, modals, tabs, and toasts inside the viewport', () => {
+    expect(css).toContain('.dropdown-panel');
+    expect(css).toContain('max-width: calc(100vw - 24px)');
+    expect(css).toContain('.modal, .modal-lg');
+    expect(css).toContain('.tabs');
+    expect(css).toContain('overflow-x: auto');
+    expect(css).toContain('.toast-stack');
+  });
+});

src/__tests__/profileApi.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
-// ── profileApi unit tests ─────────────────────────────────────────────────────
+// -- profileApi unit tests -----------------------------------------------------
 // Tests use fetch mocking to verify the API client builds correct requests.
 
 const mockFetch = vi.fn();

src/app/layout.tsx

@@ -4,28 +4,37 @@ import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 import { ToastProvider } from '@/components/ui/Toast';
 import { AuthProvider } from '@/features/auth/AuthProvider';
+import { ThemeProvider } from '@/lib/theme';
 
 const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] });
 const geistMono = Geist_Mono({ variable: '--font-geist-mono', subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'SimPle — Social Gaming Platform',
+  title: 'SimPle - Social Gaming Platform',
   description: 'A premium social gaming platform. Play sharp little games with friends, climb leaderboards, and build your profile.',
 };
 
+const themeBootScript = `(function(){try{var s=localStorage.getItem('simple.theme');if(!s){s=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: light)').matches)?'light':'dark';}document.documentElement.setAttribute('data-theme',s);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();`;
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`} suppressHydrationWarning>
       <body>
-        {/* Google Identity Services — loaded once for the whole app */}
+        <Script
+          id="simple-theme-boot"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{ __html: themeBootScript }}
+        />
         <Script
           id="google-gis"
           src="https://accounts.google.com/gsi/client"
           strategy="lazyOnload"
         />
-        <ToastProvider>
-          <AuthProvider>{children}</AuthProvider>
-        </ToastProvider>
+        <ThemeProvider>
+          <ToastProvider>
+            <AuthProvider>{children}</AuthProvider>
+          </ToastProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

src/components/friends/InviteFriendModal.tsx

@@ -58,7 +58,7 @@ export function InviteFriendModal({ open, onClose, preselectedGameId }: Props) {
           <div className="row between" style={{ marginBottom:6 }}>
             <span className="label">Game</span>
           </div>
-          <div className="row" style={{ gap:6, flexWrap:'wrap' }}>
+          <div className="row mobile-wrap" style={{ gap:6, flexWrap:'wrap' }}>
             {GAMES.slice(0,6).map(g => (
               <button key={g.id} onClick={() => setGame(g.id)} className="chip" style={{
                 cursor:'pointer', height:30,
@@ -86,7 +86,7 @@ export function InviteFriendModal({ open, onClose, preselectedGameId }: Props) {
           ) : friends.map(f => {
             const on = picked.has(f.id);
             return (
-              <button key={f.id} onClick={() => toggle(f.id)} className="row" style={{ width:'100%', padding:'10px 12px', borderBottom:'1px solid var(--border-1)', background: on ? 'var(--red-soft)' : 'transparent', gap:12, textAlign:'left' }}>
+              <button key={f.id} onClick={() => toggle(f.id)} className="row mobile-wrap" style={{ width:'100%', padding:'10px 12px', borderBottom:'1px solid var(--border-1)', background: on ? 'var(--red-soft)' : 'transparent', gap:12, textAlign:'left' }}>
                 <Avatar user={f} showPresence size="sm" />
                 <div style={{ flex:1, minWidth:0 }}>
                   <div style={{ fontSize:13, fontWeight:600 }}>{f.display}</div>

src/components/layout/AppShell.tsx

@@ -1,22 +1,26 @@
 'use client';
-import React from 'react';
+import React, { useState } from 'react';
 import { Sidebar } from './Sidebar';
 import { Topbar } from './Topbar';
 import { BottomNav } from './BottomNav';
+import { MobileNavDrawer } from './MobileNavDrawer';
 
 export function AppShell({ children }: { children: React.ReactNode }) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
   return (
     <div className="app">
       <div className="app__sidebar">
         <Sidebar />
       </div>
       <header className="app__topbar">
-        <Topbar />
+        <Topbar onMenuClick={() => setDrawerOpen(true)} />
       </header>
       <main className="app__main">
         {children}
       </main>
       <BottomNav />
+      <MobileNavDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />
     </div>
   );
 }

src/components/layout/MobileNavDrawer.tsx

@@ -0,0 +1,132 @@
+'use client';
+import React, { useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Icon } from '@/components/ui/Icons';
+import { Avatar } from '@/components/ui/Avatar';
+import { FRIEND_REQUESTS } from '@/mock/friends';
+import { NOTIFICATIONS } from '@/mock/notifications';
+import { ROUTES } from '@/lib/routes';
+import { useAuth } from '@/features/auth/AuthProvider';
+
+const NAV_PRIMARY = [
+  { href: ROUTES.dashboard, label: 'Dashboard', icon: 'home' },
+  { href: ROUTES.games, label: 'Game Library', icon: 'library' },
+  { href: ROUTES.friends, label: 'Friends', icon: 'users', badgeCount: FRIEND_REQUESTS.length },
+  { href: ROUTES.leaderboards, label: 'Leaderboards', icon: 'trophy' },
+];
+const NAV_SESSION = [
+  { href: ROUTES.lobby('SP-7F-29'), label: 'Active Lobby', icon: 'controller' },
+  { href: ROUTES.profile('me'), label: 'My Profile', icon: 'user' },
+];
+const NAV_META = [
+  { href: ROUTES.settings, label: 'Settings', icon: 'settings' },
+];
+
+interface MobileNavDrawerProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function MobileNavDrawer({ open, onClose }: MobileNavDrawerProps) {
+  const pathname = usePathname();
+  const { user } = useAuth();
+  const notifCount = NOTIFICATIONS.length;
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    onClose();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname]);
+
+  if (!open) return null;
+
+  const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/');
+
+  return (
+    <>
+      <div
+        className="mobile-drawer-overlay"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="mobile-drawer" role="dialog" aria-label="Navigation menu" aria-modal="true">
+        <div className="mobile-drawer__header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+            <div className="brand" style={{ flexShrink: 0 }}>
+              <div className="brand__logo" aria-hidden="true" />
+              <div>
+                <div className="brand__name">SimPle</div>
+                <div className="brand__tag">v0.4 - beta</div>
+              </div>
+            </div>
+            {notifCount > 0 && (
+              <span
+                className="chip chip--red chip--mono"
+                style={{ fontSize: 10, padding: '2px 7px', flexShrink: 0 }}
+              >
+                {notifCount} new
+              </span>
+            )}
+          </div>
+          <button
+            className="btn btn-ghost btn-icon btn-sm"
+            onClick={onClose}
+            aria-label="Close navigation"
+            style={{ flexShrink: 0 }}
+          >
+            <Icon name="x" size={18} />
+          </button>
+        </div>
+
+        <nav className="mobile-drawer__nav">
+          <DrawerNavGroup label="Play" items={NAV_PRIMARY} isActive={isActive} />
+          <DrawerNavGroup label="Session" items={NAV_SESSION} isActive={isActive} />
+          <DrawerNavGroup label="Account" items={NAV_META} isActive={isActive} />
+        </nav>
+
+        {user && (
+          <div className="mobile-drawer__footer">
+            <div className="surface" style={{ padding: 10, display: 'flex', gap: 10, alignItems: 'center' }}>
+              <Avatar user={{ initials: user.initials, color: user.color, status: 'online' }} showPresence />
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.displayName}</div>
+                <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-lo)' }}>@{user.username}</div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+function DrawerNavGroup({ label, items, isActive }: {
+  label: string;
+  items: { href: string; label: string; icon: string; badgeCount?: number }[];
+  isActive: (href: string) => boolean;
+}) {
+  return (
+    <div className="nav-group">
+      <div className="nav-group__label drawer-nav-label">{label}</div>
+      {items.map(item => {
+        const active = isActive(item.href);
+        return (
+          <Link key={item.href} href={item.href} className={`nav-item drawer-nav-item ${active ? 'nav-item--active' : ''}`}>
+            <Icon name={item.icon} size={17} stroke={active ? 2 : 1.75} style={{ flexShrink: 0 }} />
+            <span className="drawer-nav-label">{item.label}</span>
+            {item.badgeCount ? (
+              <span className="nav-item__badge">{item.badgeCount}</span>
+            ) : null}
+          </Link>
+        );
+      })}
+    </div>
+  );
+}