feat: mobile-responsive settings dialog, homepage, nav, and toast

- Settings dialog: full-screen on mobile with horizontal pill nav,
  card-based user/team tables, compact audit log, stacked SettingRow
- HomePage: stacked mobile layout with horizontal quick actions,
  tablet-friendly panel widths (w-64 lg:w-80)
- Extract MobileBottomNav component with safe-area-inset padding
- Add MobileBottomNav to fullscreen grid page
- Larger touch targets on hamburger, sidebar close, bottom nav items
- Toast repositioned to top-center on mobile (avoids bottom nav overlap)
- PWA viewport-fit=cover for notch devices
- Fix useMediaQuery null guard for test environment compatibility

apps/web/src/App.tsx

@@ -6,6 +6,7 @@ import { ConnectionMonitor } from "./components/common/connection-monitor";
 import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
 import { I18nProvider } from "./contexts/i18n-context";
 import { useAuth } from "./hooks/use-auth";
+import { useMobile } from "./hooks/use-mobile";
 import { identify, initAnalytics, setAnalyticsConsent } from "./lib/analytics";
 import { useAnalyticsStore } from "./stores/analytics-store";
 
@@ -177,6 +178,7 @@ function PageLoader() {
 }
 
 export function App() {
+  const isMobile = useMobile();
   const analyticsConfig = useAnalyticsStore((s) => s.config);
   const analyticsConfigLoaded = useAnalyticsStore((s) => s.configLoaded);
   const fetchAnalyticsConfig = useAnalyticsStore((s) => s.fetchConfig);
@@ -217,7 +219,7 @@ export function App() {
     <ErrorBoundary>
       <I18nProvider>
         <ConnectionMonitor />
-        <Toaster position="bottom-right" />
+        <Toaster position={isMobile ? "top-center" : "bottom-right"} />
         <BrowserRouter>
           <KeyboardShortcutProvider>
             <AuthGuard>