From ba23d59b3dd78ed03d951cb7309c21e50acb2bce Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Tue, 21 Jul 2026 09:05:30 +0000
Subject: [PATCH] =?UTF-8?q?Force=20desktop=20frame=20via=20useFrameViewpor?=
 =?UTF-8?q?t=20hook=20in=20Layout=20=E2=80=94=20applies=20to=20all=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Layout.tsx     |  3 +++
 frontend/src/hooks/useFrameViewport.ts | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 frontend/src/hooks/useFrameViewport.ts

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 80e0016..dbea2d4 100644
--- a/frontend/src/components/Layout.tsx
+++ b/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 = '/'
diff --git a/frontend/src/hooks/useFrameViewport.ts b/frontend/src/hooks/useFrameViewport.ts
new file mode 100644
index 0000000..457906e
--- /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<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])
+}