Force desktop frame via useFrameViewport hook in Layout — applies to all pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/Layout.tsx

@@ -2,6 +2,7 @@ import { NavLink } from 'react-router-dom'
 import { CalendarClock, Settings, LogOut } from 'lucide-react'
 import { can } from '../types'
 import type { User } from '../types'
+import { useFrameViewport } from '../hooks/useFrameViewport'
 
 interface Props {
   user: User
@@ -9,6 +10,8 @@ interface Props {
 }
 
 export function Layout({ user, children }: Props) {
+  useFrameViewport('desktop')
+
   async function logout() {
     await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
     window.location.href = '/'

frontend/src/hooks/useFrameViewport.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+type ViewportMode = 'desktop' | 'responsive'
+
+const DESKTOP    = 'width=1280'
+const RESPONSIVE = 'width=device-width, initial-scale=1.0'
+
+function setMetaViewport(content: string) {
+  const meta = document.querySelector<HTMLMetaElement>('meta[name="viewport"]')
+  if (meta) meta.content = content
+}
+
+export function useFrameViewport(mode: ViewportMode) {
+  useEffect(() => {
+    setMetaViewport(mode === 'desktop' ? DESKTOP : RESPONSIVE)
+    window.parent.postMessage({ type: 'hnf:viewport', mode }, '*')
+    return () => {
+      setMetaViewport(RESPONSIVE)
+      window.parent.postMessage({ type: 'hnf:viewport', mode: 'responsive' }, '*')
+    }
+  }, [mode])
+}