From 160a6864cc0683b476e9ece254e9933fdf34af4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sat, 4 Apr 2026 22:48:56 +0100
Subject: [PATCH] fix(web): mobile nav overlay was stealing wheel events,
 breaking page scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fixed full-viewport overlay had overflow-auto AND pointer-events-none,
creating a scroll container that intercepted wheel events on hover in some
browsers — even though it was supposed to be click-through. Any viewport
< lg (1024px) broke page scroll when hovering anywhere above the fold.

Move overflow-y-auto + max-h-full to the inner panel (where it actually
needs to scroll for long nav lists) and keep the outer container purely
as a pointer-events-none positioning wrapper.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../layout/header/navigation/mobile-navigation.tsx    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx b/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx
index 0aad154..39a8dd5 100644
--- a/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx
+++ b/apps/web/src/modules/marketing/layout/header/navigation/mobile-navigation.tsx
@@ -45,7 +45,14 @@ export const MobileNavigation = ({ links }: NavigationProps) => {
     <>
       <Hamburger open={open} onOpenChange={setOpen} className="lg:hidden" />
 
-      <div className="pointer-events-none fixed top-14 left-0 z-10 flex h-[calc(100vh-3.5rem)] w-full flex-col gap-7 overflow-auto lg:hidden">
+      {/*
+        NOTE: do NOT put `overflow-auto`/`overflow-y-auto` on THIS container.
+        It's `fixed` + full-viewport + `pointer-events-none`, but a scroll
+        container on top of the page still steals wheel events on hover in
+        some browsers (Chrome/Safari inconsistently), breaking page scroll.
+        Move any needed scroll behavior to the inner panel below.
+      */}
+      <div className="pointer-events-none fixed top-14 left-0 z-10 flex h-[calc(100vh-3.5rem)] w-full flex-col gap-7 lg:hidden">
         <div
           className={cn(
             "absolute inset-0 bg-black/80 opacity-0 transition-opacity duration-500 ease-out",
@@ -57,7 +64,7 @@ export const MobileNavigation = ({ links }: NavigationProps) => {
         ></div>
         <div
           className={cn(
-            "bg-background flex w-full -translate-y-full flex-col gap-2 rounded-b-md px-[1.7rem] pb-6 transition-transform duration-500 ease-out sm:px-8",
+            "bg-background flex max-h-full w-full -translate-y-full flex-col gap-2 overflow-y-auto rounded-b-md px-[1.7rem] pb-6 transition-transform duration-500 ease-out sm:px-8",
             {
               "pointer-events-auto translate-y-0": open,
             },