Fix blurry mobile nav: use block/hidden instead of max-h transition, add will-change to sticky nav

src/components/mobile-nav.tsx

@@ -67,10 +67,8 @@ export function MobileNav({
 				id="mobile-menu"
 				role="menu"
 				className={`${
-					open
+					open ? "block" : "hidden"
-						? "max-h-[80vh] opacity-100"
+				} md:block overflow-y-auto w-full md:w-auto`}
-						: "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"
-				} overflow-y-auto transition-opacity duration-200 ease-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
 				style={{ backgroundColor: "var(--color-navbar)" }}
 			>
 				<div

src/components/navigation.tsx

@@ -16,7 +16,7 @@ export async function Navigation() {
 	return (
 		<nav
 			className="sticky top-0 z-40 shadow-sm"
-			style={{ backgroundColor: "var(--color-navbar)" }}
+			style={{ backgroundColor: "var(--color-navbar)", willChange: "transform" }}
 		>
 			<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
 				<div