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,37 +98,48 @@ 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"; }
+	else if (position === "top-right") { posStyle.top = posStyle.right = "0.5rem"; }
+	else if (position === "bottom-right") { posStyle.bottom = posStyle.right = "0.5rem"; }
+	else if (position === "bottom-left") { posStyle.bottom = posStyle.left = "0.5rem"; }
+
+	return (
+		<>
+			<div
+				className="fixed z-[9999] flex items-center gap-1 sm:gap-2"
+				style={posStyle}
+			>
 				<ToolbarBtn href="/" title="Home">
 					<svg
 						width="14"
@@ -214,8 +224,23 @@ export function ClientView({
 					</svg>
 					<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
 				</div>
-			<ToolbarBtn onClick={togglePosition} title={`Move to ${position === "left" ? "right" : "left"}`}>
+				<ToolbarBtn onClick={cyclePosition} title={position}>
-				{position === "left" ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
+					<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: "/" })}
@@ -224,15 +249,11 @@ 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}
@@ -241,5 +262,6 @@ export function ClientView({
 					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"}
 		/>
 	);
 }