Add useFrameViewport hook; apply desktop mode to DirectorsForecast

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

frontend/src/pages/DirectorsForecast.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
+import { useFrameViewport } from '../hooks/useFrameViewport'
 import { Save, RefreshCw, Camera, Trash2, Printer, Repeat2 } from 'lucide-react'
 import { useAuth } from '../components/AuthGate'
 import { dfGetWorksheet, dfSaveWorksheet, dfGetReport, dfSaveSnapshot, dfDeleteSnapshot } from '../api'
@@ -486,6 +487,7 @@ function ReportTab({ year, month }: { year: number; month: number }) {
 type Tab = 'worksheet' | 'report'
 
 export default function DirectorsForecast() {
+  useFrameViewport('desktop')
   const now   = new Date()
   const [year, setYear]   = useState(now.getFullYear())
   const [month, setMonth] = useState(now.getMonth() + 1)