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

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

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])
+}