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,110 +97,117 @@ export function ClientView({
 	const sep = base.includes("?") ? "&" : "?";
 	const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;
 
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => { setMounted(true); }, []);
+
+	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">
+			<ToolbarBtn href="/" title="Home">
+				<svg
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					role="img"
+					aria-label="Home"
+				>
+					<title>Home</title>
+					<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+					<polyline points="9 22 9 12 15 12 15 22" />
+				</svg>
+			</ToolbarBtn>
+			<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
+				<svg
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					role="img"
+					aria-label="Reload"
+				>
+					<title>Reload</title>
+					<polyline points="23 4 23 10 17 10" />
+					<polyline points="1 20 1 14 7 14" />
+					<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+				</svg>
+			</ToolbarBtn>
+			<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
+				<svg
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					role="img"
+					aria-label="Fullscreen"
+				>
+					<title>Fullscreen</title>
+					<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+				</svg>
+			</ToolbarBtn>
+			<div
+				className="h-7 sm:h-8 px-1.5 sm:px-2 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
+				style={{
+					borderColor:
+						"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
+					background:
+						"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
+					color:
+						"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
+				}}
+				title="Online users"
+			>
+				<svg
+					width="14"
+					height="14"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					role="img"
+					aria-label="Online users"
+				>
+					<title>Online users</title>
+					<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+					<circle cx="12" cy="7" r="4" />
+				</svg>
+				<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
+			</div>
+			<ToolbarBtn
+				onClick={() => signOut({ callbackUrl: "/" })}
+				title="Logout"
+			>
+				<LogOut size={14} />
+			</ToolbarBtn>
+		</div>
+	);
+
 	return (
 		<div
 			className="relative w-screen h-screen overflow-hidden"
 			style={{ backgroundColor: "var(--color-background)" }}
 		>
-			<div className="fixed top-2 sm:top-4 left-2 sm:left-4 z-50 flex items-center gap-1 sm:gap-2">
+			{mounted && createPortal(toolbar, document.body)}
-				<ToolbarBtn href="/" title="Home">
-					<svg
-						width="14"
-						height="14"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Home"
-					>
-						<title>Home</title>
-						<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-						<polyline points="9 22 9 12 15 12 15 22" />
-					</svg>
-				</ToolbarBtn>
-				<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
-					<svg
-						width="14"
-						height="14"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Reload"
-					>
-						<title>Reload</title>
-						<polyline points="23 4 23 10 17 10" />
-						<polyline points="1 20 1 14 7 14" />
-						<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-					</svg>
-				</ToolbarBtn>
-				<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
-					<svg
-						width="14"
-						height="14"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Fullscreen"
-					>
-						<title>Fullscreen</title>
-						<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
-					</svg>
-				</ToolbarBtn>
-				<div
-					className="h-7 sm:h-8 px-1.5 sm:px-2 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
-						background:
-							"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
-						color:
-							"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
-					}}
-					title="Online users"
-				>
-					<svg
-						width="14"
-						height="14"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Online users"
-					>
-						<title>Online users</title>
-						<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-						<circle cx="12" cy="7" r="4" />
-					</svg>
-					<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
-				</div>
-				<ToolbarBtn
-					onClick={() => signOut({ callbackUrl: "/" })}
-					title="Logout"
-				>
-					<LogOut size={14} />
-				</ToolbarBtn>
-			</div>
 
 			<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>
 	);