fix: render toolbar via portal to body so it stays visible in fullscreen

src/app/client/client-view.tsx

@@ -3,7 +3,13 @@
 import { LogOut } from "lucide-react";
 import Link from "next/link";
 import { signOut } from "next-auth/react";
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useState,
+} from "react";
+import { createPortal } from "react-dom";
 
 function ToolbarBtn({
 	onClick,
@@ -91,12 +97,11 @@ export function ClientView({
 	const sep = base.includes("?") ? "&" : "?";
 	const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;
 
-	return (
+	const [mounted, setMounted] = useState(false);
-		<div
+	useEffect(() => { setMounted(true); }, []);
-			className="relative w-screen h-screen overflow-hidden"
+
-			style={{ backgroundColor: "var(--color-background)" }}
+	const toolbar = (
-		>
+		<div className="fixed top-2 sm:top-4 left-2 sm:left-4 z-[9999] flex items-center gap-1 sm:gap-2">
-			<div className="fixed top-2 sm:top-4 left-2 sm:left-4 z-50 flex items-center gap-1 sm:gap-2">
 			<ToolbarBtn href="/" title="Home">
 				<svg
 					width="14"
@@ -188,13 +193,21 @@ export function ClientView({
 				<LogOut size={14} />
 			</ToolbarBtn>
 		</div>
+	);
+
+	return (
+		<div
+			className="relative w-screen h-screen overflow-hidden"
+			style={{ backgroundColor: "var(--color-background)" }}
+		>
+			{mounted && createPortal(toolbar, document.body)}
 
 			<iframe
 				id="nitro"
 				src={clientSrc}
 				className="absolute inset-0 w-full h-full border-0 m-0 p-0 overflow-hidden"
 				title={hotelName}
-				allow="autoplay; fullscreen; gamepad"
+				allow="autoplay; gamepad"
 			/>
 		</div>
 	);