From 3fe3846ad586f17e0926c53a337f5c13c3f40d6d Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Mon, 13 Jul 2026 19:26:02 +0200
Subject: [PATCH] Fix blurry mobile menu: use GPU-friendly opacity+transform
 instead of max-height transition

---
 src/components/mobile-nav.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index 738077dd..f0817793 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -62,7 +62,11 @@ export function MobileNav({ children, menuLabel = "Open menu", closeLabel = "Clo
       <div
         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-all duration-300 ease-in-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`}
+        className={`${
+          open
+            ? "max-h-[80vh] opacity-100 translate-y-0"
+            : "max-h-0 opacity-0 translate-y-[-6px] pointer-events-none md:pointer-events-auto"
+        } overflow-y-auto transition-[opacity,transform] duration-200 ease-out md:!max-h-none md:!opacity-100 md:!translate-y-0 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
         style={{ backgroundColor: "var(--color-navbar)" }}
       >
         <div