Rebuild all menus from scratch for pixel-perfect rendering on every device

- mobile-nav: pure block/hidden toggle, no transforms, no transition-all
- nav-dropdown: clean block/hidden toggle, no CSS animation hacks
- navigation: removed shadow-sm, no will-change, no GPU compositing
- top-header: consistent mobile layout, clean details/summary dropdowns
- admin-mobile-wrapper: inline transition instead of CSS class for sidebar
- globals.css: removed transition-all from nav-item/dropdown-item, replaced
  with specific color/background-color transitions only, added hover bg

src/app/globals.css

@@ -205,7 +205,8 @@ summary,
 		letter-spacing: 0.03em;
 		text-transform: uppercase;
 		white-space: nowrap;
-		transition: color 0.15s ease-in-out;
+		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+		border-radius: 0.5rem;
 	}
 	.nav-item::after {
 		content: "";
@@ -224,10 +225,12 @@ summary,
 	}
 	.nav-item:hover {
 		color: var(--color-primary-readable, var(--color-primary));
+		background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
 	}
 	.dropdown-item {
-		@apply block py-2.5 px-4 text-sm font-semibold transition-all duration-100 rounded-lg mx-1;
+		@apply block py-2.5 px-4 text-sm font-semibold rounded-lg mx-1;
 		color: var(--color-dropdown-text-readable, var(--color-text-readable));
+		transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
 	}
 	.dropdown-item:hover {
 		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);

src/components/admin/admin-mobile-wrapper.tsx

@@ -36,7 +36,7 @@ export function AdminMobileWrapper({
 				<button
 					type="button"
 					onClick={() => setOpen(!open)}
-					className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-[var(--admin-accent)]/15"
+					className="flex items-center justify-center w-9 h-9 rounded-lg"
 					style={{ color: "var(--admin-text-muted)" }}
 				>
 					{open ? <X size={18} /> : <Menu size={18} />}
@@ -52,16 +52,18 @@ export function AdminMobileWrapper({
 			{/* Backdrop */}
 			{open && (
 				<div
-					className="fixed inset-0 z-40 lg:hidden bg-black/50"
+					className="fixed inset-0 z-40 lg:hidden"
 					onClick={() => setOpen(false)}
+					style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
 				/>
 			)}
 
 			{/* Sidebar */}
 			<div
-				className={`fixed inset-y-0 left-0 z-50 w-[260px] transform transition-transform duration-300 ease-in-out lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
+				className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
 					open ? "translate-x-0" : "-translate-x-full"
 				}`}
+				style={{ transition: "transform 300ms ease-in-out" }}
 			>
 				{sidebar}
 			</div>

src/components/mobile-nav.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 
 interface MobileNavProps {
-	children: React.ReactNode;
+	children: ReactNode;
-	/** Accessible label for the menu button. Pass translated string from server. */
 	menuLabel?: string;
 	closeLabel?: string;
 }
@@ -15,13 +14,23 @@ export function MobileNav({
 	closeLabel = "Close menu",
 }: MobileNavProps) {
 	const [open, setOpen] = useState(false);
+	const panelRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [open]);
 
 	return (
 		<>
 			<button
 				type="button"
-				onClick={() => setOpen(!open)}
+				onClick={() => setOpen((v) => !v)}
-				className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
+				className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg ml-auto shrink-0"
 				style={{
 					color: "var(--color-navbar-text-readable, var(--color-navbar-text))",
 				}}
@@ -57,18 +66,15 @@ export function MobileNav({
 				<div
 					className="fixed inset-0 z-30 md:hidden"
 					onClick={() => setOpen(false)}
-					style={{
+					style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
-						backgroundColor: "rgba(0,0,0,0.6)",
-					}}
 				/>
 			)}
 
 			<div
 				id="mobile-menu"
+				ref={panelRef}
 				role="menu"
-				className={`${
+				className={`${open ? "block" : "hidden"} md:block w-full md:w-auto`}
-					open ? "block" : "hidden"
-				} md:block overflow-y-auto w-full md:w-auto`}
 				style={{ backgroundColor: "var(--color-navbar)" }}
 			>
 				<div

src/components/nav-dropdown.tsx

@@ -14,30 +14,29 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 	const ref = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
-		function handleClick(e: MouseEvent) {
+		if (!open) return;
+		const onClick = (e: MouseEvent) => {
 			if (ref.current && !ref.current.contains(e.target as Node))
 				setOpen(false);
-		}
+		};
-		function handleKey(e: KeyboardEvent) {
+		const onKey = (e: KeyboardEvent) => {
 			if (e.key === "Escape") setOpen(false);
-		}
+		};
-		if (open) {
+		document.addEventListener("mousedown", onClick);
-			document.addEventListener("mousedown", handleClick);
+		document.addEventListener("keydown", onKey);
-			document.addEventListener("keydown", handleKey);
-		}
 		return () => {
-			document.removeEventListener("mousedown", handleClick);
+			document.removeEventListener("mousedown", onClick);
-			document.removeEventListener("keydown", handleKey);
+			document.removeEventListener("keydown", onKey);
 		};
 	}, [open]);
 
 	return (
-		<div ref={ref} className="relative group md:flex">
+		<div ref={ref} className="relative md:flex">
 			<button
 				type="button"
-				onClick={() => setOpen(!open)}
+				onClick={() => setOpen((v) => !v)}
 				onKeyDown={(e) => {
-					if (e.key === "Enter" || e.key === " ") setOpen(!open);
+					if (e.key === "Enter" || e.key === " ") setOpen((v) => !v);
 				}}
 				className="nav-item cursor-pointer"
 				aria-expanded={open}
@@ -55,7 +54,7 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 				) : null}
 				{label}
 				<svg
-					className={`ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+					className={`ml-auto md:ml-1 w-3 h-3 ${open ? "rotate-180" : ""}`}
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"

src/components/top-header.tsx

@@ -14,24 +14,17 @@ function Currency({
 	amount: number;
 	label: string;
 }) {
+	const textColor = "var(--color-navbar-text-readable, var(--color-navbar-text))";
+	const valueColor =
+		"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
+
 	return (
 		<div className="flex gap-x-1 sm:gap-x-2 items-center">
 			<div
 				className={`h-[20px] w-[20px] sm:h-[25px] sm:w-[25px] rounded-full outline-offset-[3px] ${icon}`}
 			/>
-			<div
+			<div style={{ color: textColor }}>
-				style={{
+				<span className="font-semibold text-xs sm:text-sm" style={{ color: valueColor }}>
-					color:
-						"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text-muted)))",
-				}}
-			>
-				<span
-					className="font-semibold text-xs sm:text-sm"
-					style={{
-						color:
-							"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
-					}}
-				>
 					{amount.toLocaleString()}
 				</span>{" "}
 				<span className="hidden sm:inline text-xs">{label}</span>
@@ -74,6 +67,8 @@ export async function TopHeader() {
 		)) ?? "";
 	const avatar = avatarImageUrl(imager, look, { headOnly: true, direction: 2 });
 	const isStaff = (session.user.rank ?? 0) >= 7;
+	const textColor =
+		"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
 
 	return (
 		<div style={{ backgroundColor: "var(--color-navbar)" }}>
@@ -93,10 +88,7 @@ export async function TopHeader() {
 						<details className="relative">
 							<summary
 								className="list-none cursor-pointer font-semibold text-xs sm:text-sm [&::-webkit-details-marker]:hidden"
-								style={{
+								style={{ color: textColor }}
-									color:
-										"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
-								}}
 							>
 								<span className="hidden sm:inline">Administration</span>
 								<span className="sm:hidden">Admin</span>
@@ -144,10 +136,7 @@ export async function TopHeader() {
 							/>
 							<span
 								className="hidden sm:inline -ml-2 font-semibold"
-								style={{
+								style={{ color: textColor }}
-									color:
-										"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
-								}}
 							>
 								{session.user.name}
 							</span>