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;
+			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,44 +146,22 @@ export function LanguageSwitcher({
 		setOpen(false);
 	}
 
-	return (
+	const menu = open && menuPos && mounted && (
-		<div className="relative" ref={ref}>
-			<button
-				type="button"
-				onClick={() => setOpen(!open)}
-				disabled={pending}
-				aria-label="Change language"
-				title="Language"
-				aria-expanded={open}
-				aria-haspopup="listbox"
-				className={
-					isAdmin
-						? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] px-2.5 text-xs font-bold uppercase tracking-wide text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/15 hover:text-[var(--admin-accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] disabled:opacity-60"
-						: "nav-item flex items-center gap-1.5 bg-transparent text-[13px] border-none cursor-pointer px-1"
-				}
-			>
-				<Image
-					src={`/assets/images/icons/flags/${current.code}.png`}
-					alt=""
-					width={16}
-					height={16}
-					className="inline-block h-4 w-auto"
-				/>
-				<span>{current.code.toUpperCase()}</span>
-				<ChevronDown
-					className={`h-3 w-3 opacity-70 transition-transform ${open ? "rotate-180" : ""}`}
-					aria-hidden
-				/>
-			</button>
-
-			{open && (
 		<div
+			ref={menuRef}
 			role="listbox"
 			aria-label="Languages"
+			style={{
+				position: "fixed",
+				top: menuPos.top,
+				left: menuPos.left,
+				width: MENU_WIDTH,
+				zIndex: 200,
+			}}
 			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"
+					? "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"
+					: "dropdown-menu overflow-hidden rounded-xl z-50 shadow-xl"
 			}
 		>
 			<div
@@ -224,7 +260,40 @@ export function LanguageSwitcher({
 				})}
 			</div>
 		</div>
-			)}
+	);
+
+	return (
+		<div className="relative">
+			<button
+				ref={triggerRef}
+				type="button"
+				onClick={() => setOpen(!open)}
+				disabled={pending}
+				aria-label="Change language"
+				title="Language"
+				aria-expanded={open}
+				aria-haspopup="listbox"
+				className={
+					isAdmin
+						? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] px-2.5 text-xs font-bold uppercase tracking-wide text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/15 hover:text-[var(--admin-accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] disabled:opacity-60"
+						: "nav-item flex items-center gap-1.5 bg-transparent text-[13px] border-none cursor-pointer px-1"
+				}
+			>
+				<Image
+					src={`/assets/images/icons/flags/${current.code}.png`}
+					alt=""
+					width={16}
+					height={16}
+					className="inline-block h-4 w-auto"
+				/>
+				<span>{current.code.toUpperCase()}</span>
+				<ChevronDown
+					className={`h-3 w-3 opacity-70 transition-transform ${open ? "rotate-180" : ""}`}
+					aria-hidden
+				/>
+			</button>
+
+			{mounted && menu ? createPortal(menu, document.body) : null}
 		</div>
 	);
 }