diff --git a/frontend/src/hooks/useFrameViewport.ts b/frontend/src/hooks/useFrameViewport.ts new file mode 100644 index 00000000..ed93ba28 --- /dev/null +++ b/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('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]) +} diff --git a/frontend/src/pages/DirectorsForecast.tsx b/frontend/src/pages/DirectorsForecast.tsx index 67610afe..5ad2688e 100644 --- a/frontend/src/pages/DirectorsForecast.tsx +++ b/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)