From bfa8aedb254ae01dfbde90a1ae679b5c07ed688a Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 14 Jul 2026 15:47:46 +0200
Subject: [PATCH] Fix blurry mobile nav: use block/hidden instead of max-h
 transition, add will-change to sticky nav

---
 src/components/mobile-nav.tsx | 6 ++----
 src/components/navigation.tsx | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index de138f71e1..57053bbd37 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -67,10 +67,8 @@ export function MobileNav({
 				id="mobile-menu"
 				role="menu"
 				className={`${
-					open
-						? "max-h-[80vh] opacity-100"
-						: "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`}
+					open ? "block" : "hidden"
+				} md:block overflow-y-auto w-full md:w-auto`}
 				style={{ backgroundColor: "var(--color-navbar)" }}
 			>
 				<div
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index 54d756a79c..f696593d7b 100644
--- a/src/components/navigation.tsx
+++ b/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