Fit browser workspace within viewport below dynamic header bars

frontend/App.tsx

@@ -19,13 +19,15 @@ function Workspace() {
   const { isLoaded, runtimePolicyLoaded } = useAppSettings()
   useGenerationRecoveryWatcher()
   const ready = connected && isLoaded && runtimePolicyLoaded
-  return <>
-    <div className={`px-4 py-2 text-sm ${ready ? 'bg-emerald-950 text-emerald-200' : 'bg-amber-950 text-amber-200'}`} role="status">
+  return <div className="flex flex-1 min-h-0 min-w-0 flex-col overflow-hidden" data-testid="workspace">
+    <div className={`shrink-0 px-4 py-2 text-sm ${ready ? 'bg-emerald-950 text-emerald-200' : 'bg-amber-950 text-amber-200'}`} role="status">
       {ready ? 'LTX backend connected · generation runs on the remote server' : isLoading ? 'Checking LTX connection…' : 'LTX is not ready. Activate Video mode in Athena Deck. The connection is checked automatically.'}
     </div>
+    <div className="flex-1 min-h-0 min-w-0 overflow-hidden" data-testid="workspace-content">
     {currentView === 'home' ? <Home /> : ready ? <Project /> : <div className="p-12"><p>Projects are retained. Generation becomes available when the LTX backend and its settings are reachable.</p><button className="mt-4 underline" onClick={goHome}>Back to projects</button></div>}
+    </div>
     <KeyboardShortcutsModal /><DevPanel />
-  </>
+  </div>
 }
 export default function App() {
   const [session, setSession] = useState<{ backendUrl: string } | null>(null)
@@ -48,18 +50,18 @@ export default function App() {
       <button className="bg-blue-600 rounded px-4 py-2" type="submit">Sign in</button><p role="alert" className="mt-4 text-red-300">{error}</p>
     </form>
   </main>
-  return <>
-    <header className="flex justify-between items-center px-4 py-2 bg-zinc-900 border-b border-zinc-700 text-sm">
+  return <div className="h-dvh w-full min-h-0 flex flex-col overflow-hidden" data-testid="web-shell">
+    <header className="shrink-0 flex justify-between items-center px-4 py-2 bg-zinc-900 border-b border-zinc-700 text-sm">
       <strong>LTX DeskWEB · Preview</strong><div className="flex gap-4"><button onClick={() => setHelp(!help)}>Connection & information</button><button onClick={async () => { await webRequest('/web/logout', {}); location.reload() }}>Sign out</button></div>
     </header>
-    {help && <aside className="p-5 bg-zinc-900 border-b border-zinc-700 space-y-2">
+    {help && <aside className="shrink-0 max-h-[35dvh] overflow-y-auto p-5 bg-zinc-900 border-b border-zinc-700 space-y-2">
       <p>Native LTX API via: <code>{session.backendUrl}</code>. Change the address and token in the container configuration.</p>
       <p>Video mode is managed in Athena Deck. This web app never starts or installs a model.</p>
       <p>Preview: projects are saved in this browser. Use “Back up projects” before clearing browser data. Timeline rendering, desktop folder dialogs and Hugging Face desktop login are not yet ported.</p>
       <WebProjectBackup />
       <button className="ml-4 underline" onClick={() => setHelp(false)}>Close</button>
     </aside>}
-    {message && <div className="p-3 bg-blue-950 flex justify-between" role="status">{message}<button onClick={() => setMessage('')}>Dismiss</button></div>}
+    {message && <div className="shrink-0 max-h-[15dvh] overflow-y-auto p-3 bg-blue-950 flex justify-between gap-4" role="status">{message}<button onClick={() => setMessage('')}>Dismiss</button></div>}
     <AppSettingsProvider><ProjectProvider><ViewProvider><KeyboardShortcutsProvider><DevFlagsProvider><Workspace /></DevFlagsProvider></KeyboardShortcutsProvider></ViewProvider></ProjectProvider></AppSettingsProvider>
-  </>
+  </div>
 }