fix: toolbar now renders outside overflow container, supports 4 corner positions (top-left/right, bottom-left/right)

src/app/client/client-view.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronLeft, ChevronRight, LogOut } from "lucide-react";
+import { LogOut } from "lucide-react";
 import Link from "next/link";
 import { signOut } from "next-auth/react";
 import {
@@ -9,7 +9,6 @@ import {
 	useEffect,
 	useState,
 } from "react";
-import { createPortal } from "react-dom";
 
 function ToolbarBtn({
 	onClick,
@@ -99,147 +98,170 @@ export function ClientView({
 	const sep = base.includes("?") ? "&" : "?";
 	const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;
 
-	const [mounted, setMounted] = useState(false);
+	const POSITIONS = ["top-left", "top-right", "bottom-right", "bottom-left"] as const;
-	const [position, setPosition] = useState<"left" | "right">("right");
+	type Position = (typeof POSITIONS)[number];
 
-	useEffect(() => { setMounted(true); }, []);
+	const [position, setPosition] = useState<Position>("top-right");
 
 	useEffect(() => {
 		const params = new URLSearchParams(window.location.search);
 		const urlPos = params.get("toolbar");
-		if (urlPos === "left" || urlPos === "right") {
+		if ((POSITIONS as readonly string[]).includes(urlPos ?? "")) {
-			setPosition(urlPos);
+			setPosition(urlPos as Position);
 			return;
 		}
 		try {
 			const stored = localStorage.getItem("client_toolbar_position");
-			if (stored === "left" || stored === "right") {
+			if ((POSITIONS as readonly string[]).includes(stored ?? "")) {
-				setPosition(stored);
+				setPosition(stored as Position);
 				return;
 			}
 		} catch { /* private mode */ }
-		if (defaultToolbarPosition === "left" || defaultToolbarPosition === "right")
+		if ((POSITIONS as readonly string[]).includes(defaultToolbarPosition))
-			setPosition(defaultToolbarPosition as "left" | "right");
+			setPosition(defaultToolbarPosition as Position);
 	}, [defaultToolbarPosition]);
 
-	function togglePosition() {
+	function cyclePosition() {
-		const next = position === "left" ? "right" : "left";
+		const idx = POSITIONS.indexOf(position);
+		const next = POSITIONS[(idx + 1) % POSITIONS.length];
 		setPosition(next);
 		try { localStorage.setItem("client_toolbar_position", next); } catch {}
 	}
 
-	const toolbar = (
+	const posStyle: React.CSSProperties = {};
-		<div className={`fixed top-2 sm:top-4 ${position === "left" ? "left-2 sm:left-4" : "right-2 sm:right-4"} z-[9999] flex items-center gap-1 sm:gap-2`}>
+	if (position === "top-left") { posStyle.top = posStyle.left = "0.5rem"; }
-			<ToolbarBtn href="/" title="Home">
+	else if (position === "top-right") { posStyle.top = posStyle.right = "0.5rem"; }
-				<svg
+	else if (position === "bottom-right") { posStyle.bottom = posStyle.right = "0.5rem"; }
-					width="14"
+	else if (position === "bottom-left") { posStyle.bottom = posStyle.left = "0.5rem"; }
-					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={togglePosition} title={`Move to ${position === "left" ? "right" : "left"}`}>
-				{position === "left" ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
-			</ToolbarBtn>
-			<ToolbarBtn
-				onClick={() => signOut({ callbackUrl: "/" })}
-				title="Logout"
-			>
-				<LogOut size={14} />
-			</ToolbarBtn>
-		</div>
-	);
 
 	return (
-		<div
+		<>
-			className="relative w-screen h-screen overflow-hidden"
+			<div
-			style={{ backgroundColor: "var(--color-background)" }}
+				className="fixed z-[9999] flex items-center gap-1 sm:gap-2"
-		>
+				style={posStyle}
-			{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={cyclePosition} title={position}>
+					<svg
+						width="14"
+						height="14"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label="Move toolbar"
+					>
+						<title>Move toolbar</title>
+						<path d="M12 5v14M5 12h14" />
+						<path d="M15 9l-3-3-3 3M9 15l3 3 3-3" />
+					</svg>
+				</ToolbarBtn>
+				<ToolbarBtn
+					onClick={() => signOut({ callbackUrl: "/" })}
+					title="Logout"
+				>
+					<LogOut size={14} />
+				</ToolbarBtn>
+			</div>
 
-			<iframe
+			<div
-				id="nitro"
+				className="relative w-screen h-screen overflow-hidden"
-				src={clientSrc}
+				style={{ backgroundColor: "var(--color-background)" }}
-				className="absolute inset-0 w-full h-full border-0 m-0 p-0 overflow-hidden"
+			>
-				title={hotelName}
+				<iframe
-				allow="autoplay; gamepad"
+					id="nitro"
-			/>
+					src={clientSrc}
-		</div>
+					className="absolute inset-0 w-full h-full border-0 m-0 p-0 overflow-hidden"
+					title={hotelName}
+					allow="autoplay; gamepad"
+				/>
+			</div>
+		</>
 	);
 }

src/app/client/page.tsx

@@ -19,7 +19,7 @@ export default async function ClientPage() {
 	const [hotelName, clientUrl, defaultToolbarPosition] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get("nitro_client_url", ""),
-		siteSettings.get("client_toolbar_position", "right"),
+		siteSettings.get("client_toolbar_position", "top-right"),
 	]);
 
 	const ip = (await headers()).get("x-real-client-ip") ?? "0.0.0.0";
@@ -35,7 +35,7 @@ export default async function ClientPage() {
 			clientUrl={clientUrl || "/nitro-client/"}
 			hotelName={hotelName}
 			initialOnline={onlineCount}
-			defaultToolbarPosition={defaultToolbarPosition ?? "right"}
+			defaultToolbarPosition={defaultToolbarPosition ?? "top-right"}
 		/>
 	);
 }