Fix language menu position by portaling out of sidebar overflow.

Co-authored-by: Cursor <[email protected]>

src/components/language-switcher.tsx

@@ -4,7 +4,15 @@ import { Check, ChevronDown, Search } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useLocale } from "next-intl";
-import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import {
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+	useTransition,
+} from "react";
+import { createPortal } from "react-dom";
 import { setLocaleCookie } from "@/actions/set-locale";
 
 const LOCALES: { code: string; label: string; lang: string }[] = [
@@ -32,6 +40,10 @@ const LOCALES: { code: string; label: string; lang: string }[] = [
 	{ code: "ru", label: "Русский", lang: "ru" },
 ];
 
+const MENU_WIDTH = 224; // w-56
+const MENU_GAP = 6;
+const VIEWPORT_PAD = 8;
+
 export function LanguageSwitcher({
 	variant = "nav",
 }: {
@@ -42,7 +54,12 @@ export function LanguageSwitcher({
 	const [pending, startTransition] = useTransition();
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");
-	const ref = useRef<HTMLDivElement>(null);
+	const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(
+		null,
+	);
+	const [mounted, setMounted] = useState(false);
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const menuRef = useRef<HTMLDivElement>(null);
 	const searchRef = useRef<HTMLInputElement>(null);
 	const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
 	const isAdmin = variant === "admin";
@@ -59,13 +76,54 @@ export function LanguageSwitcher({
 	}, [search]);
 
 	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	useLayoutEffect(() => {
+		if (!open) {
+			setMenuPos(null);
+			return;
+		}
+
+		function place() {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const maxLeft = window.innerWidth - MENU_WIDTH - VIEWPORT_PAD;
+			const left = Math.min(
+				Math.max(VIEWPORT_PAD, rect.right - MENU_WIDTH),
+				Math.max(VIEWPORT_PAD, maxLeft),
+			);
+			setMenuPos({ top: rect.bottom + MENU_GAP, left });
+		}
+
+		place();
+		window.addEventListener("resize", place);
+		window.addEventListener("scroll", place, true);
+		return () => {
+			window.removeEventListener("resize", place);
+			window.removeEventListener("scroll", place, true);
+		};
+	}, [open]);
+
+	useEffect(() => {
+		if (!open) return;
 		function handleClick(e: MouseEvent) {
-			if (ref.current && !ref.current.contains(e.target as Node))
+			const t = e.target as Node;
-				setOpen(false);
+			if (triggerRef.current?.contains(t) || menuRef.current?.contains(t))
+				return;
+			setOpen(false);
+		}
+		function handleKey(e: KeyboardEvent) {
+			if (e.key === "Escape") setOpen(false);
 		}
 		document.addEventListener("mousedown", handleClick);
-		return () => document.removeEventListener("mousedown", handleClick);
+		document.addEventListener("keydown", handleKey);
-	}, []);
+		return () => {
+			document.removeEventListener("mousedown", handleClick);
+			document.removeEventListener("keydown", handleKey);
+		};
+	}, [open]);
 
 	useEffect(() => {
 		if (!open) {
@@ -88,9 +146,126 @@ export function LanguageSwitcher({
 		setOpen(false);
 	}
 
+	const menu = open && menuPos && mounted && (
+		<div
+			ref={menuRef}
+			role="listbox"
+			aria-label="Languages"
+			style={{
+				position: "fixed",
+				top: menuPos.top,
+				left: menuPos.left,
+				width: MENU_WIDTH,
+				zIndex: 200,
+			}}
+			className={
+				isAdmin
+					? "overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] text-[var(--admin-text)] shadow-xl"
+					: "dropdown-menu overflow-hidden rounded-xl z-50 shadow-xl"
+			}
+		>
+			<div
+				className={
+					isAdmin
+						? "border-b border-[var(--admin-border)] p-2"
+						: "border-b border-black/10 dark:border-white/10 p-2"
+				}
+			>
+				<label
+					className={
+						isAdmin
+							? "flex min-w-0 items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2.5 py-1.5"
+							: "flex min-w-0 items-center gap-2 rounded-lg border bg-background px-2.5 py-1.5"
+					}
+				>
+					<Search
+						className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
+						aria-hidden
+					/>
+					<input
+						ref={searchRef}
+						type="text"
+						placeholder="Search…"
+						value={search}
+						onChange={(e) => setSearch(e.target.value)}
+						aria-label="Search languages"
+						className={
+							isAdmin
+								? "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-[var(--admin-text)] outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0 placeholder:text-[var(--admin-text-muted)]"
+								: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0"
+						}
+					/>
+				</label>
+			</div>
+
+			<div className="max-h-64 overflow-y-auto overscroll-contain p-1.5">
+				{filtered.length === 0 && (
+					<p
+						className={`px-2 py-6 text-center text-xs ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
+					>
+						No languages found
+					</p>
+				)}
+				{filtered.map((l) => {
+					const selected = l.code === locale;
+					return (
+						<button
+							key={l.code}
+							type="button"
+							role="option"
+							aria-selected={selected}
+							onClick={() => switchLocale(l.code)}
+							className={
+								isAdmin
+									? `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors border-0 cursor-pointer ${
+											selected
+												? "bg-[var(--admin-accent)]/18 text-[var(--admin-accent)] font-semibold"
+												: "bg-transparent text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/10"
+										}`
+									: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm font-medium transition-colors border-0 cursor-pointer ${
+											selected
+												? "opacity-100"
+												: "opacity-70 hover:opacity-100"
+										}`
+							}
+							style={
+								isAdmin
+									? undefined
+									: {
+											color: "var(--color-text-readable, var(--color-text))",
+											background: selected
+												? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
+												: "transparent",
+										}
+							}
+						>
+							<Image
+								src={`/assets/images/icons/flags/${l.code}.png`}
+								alt=""
+								width={16}
+								height={16}
+								className="inline-block h-4 w-auto shrink-0"
+							/>
+							<span className="min-w-0 flex-1 truncate">{l.label}</span>
+							{selected ? (
+								<Check
+									className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-accent)]" : "opacity-80"}`}
+									aria-hidden
+								/>
+							) : (
+								<span className="w-3.5 shrink-0" aria-hidden />
+							)}
+						</button>
+					);
+				})}
+			</div>
+		</div>
+	);
+
 	return (
-		<div className="relative" ref={ref}>
+		<div className="relative">
 			<button
+				ref={triggerRef}
 				type="button"
 				onClick={() => setOpen(!open)}
 				disabled={pending}
@@ -118,113 +293,7 @@ export function LanguageSwitcher({
 				/>
 			</button>
 
-			{open && (
+			{mounted && menu ? createPortal(menu, document.body) : null}
-				<div
-					role="listbox"
-					aria-label="Languages"
-					className={
-						isAdmin
-							? "absolute right-0 top-full mt-1.5 z-50 w-56 overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] text-[var(--admin-text)] shadow-xl"
-							: "dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 w-56 overflow-hidden rounded-xl z-50"
-					}
-				>
-					<div
-						className={
-							isAdmin
-								? "border-b border-[var(--admin-border)] p-2"
-								: "border-b border-black/10 dark:border-white/10 p-2"
-						}
-					>
-						<label
-							className={
-								isAdmin
-									? "flex min-w-0 items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2.5 py-1.5"
-									: "flex min-w-0 items-center gap-2 rounded-lg border bg-background px-2.5 py-1.5"
-							}
-						>
-							<Search
-								className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
-								aria-hidden
-							/>
-							<input
-								ref={searchRef}
-								type="text"
-								placeholder="Search…"
-								value={search}
-								onChange={(e) => setSearch(e.target.value)}
-								aria-label="Search languages"
-								className={
-									isAdmin
-										? "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-[var(--admin-text)] outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0 placeholder:text-[var(--admin-text-muted)]"
-										: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0"
-								}
-							/>
-						</label>
-					</div>
-
-					<div className="max-h-64 overflow-y-auto overscroll-contain p-1.5">
-						{filtered.length === 0 && (
-							<p
-								className={`px-2 py-6 text-center text-xs ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
-							>
-								No languages found
-							</p>
-						)}
-						{filtered.map((l) => {
-							const selected = l.code === locale;
-							return (
-								<button
-									key={l.code}
-									type="button"
-									role="option"
-									aria-selected={selected}
-									onClick={() => switchLocale(l.code)}
-									className={
-										isAdmin
-											? `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors border-0 cursor-pointer ${
-													selected
-														? "bg-[var(--admin-accent)]/18 text-[var(--admin-accent)] font-semibold"
-														: "bg-transparent text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/10"
-												}`
-											: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm font-medium transition-colors border-0 cursor-pointer ${
-													selected
-														? "opacity-100"
-														: "opacity-70 hover:opacity-100"
-												}`
-									}
-									style={
-										isAdmin
-											? undefined
-											: {
-													color: "var(--color-text-readable, var(--color-text))",
-													background: selected
-														? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
-														: "transparent",
-												}
-									}
-								>
-									<Image
-										src={`/assets/images/icons/flags/${l.code}.png`}
-										alt=""
-										width={16}
-										height={16}
-										className="inline-block h-4 w-auto shrink-0"
-									/>
-									<span className="min-w-0 flex-1 truncate">{l.label}</span>
-									{selected ? (
-										<Check
-											className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-accent)]" : "opacity-80"}`}
-											aria-hidden
-										/>
-									) : (
-										<span className="w-3.5 shrink-0" aria-hidden />
-									)}
-								</button>
-							);
-						})}
-					</div>
-				</div>
-			)}
 		</div>
 	);
 }