fix(web): mobile nav overlay was stealing wheel events, breaking page scroll
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled
Some checks failed
CI / Tests / 🧪 Test (push) Has been cancelled
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>
This commit is contained in:
@@ -45,7 +45,14 @@ export const MobileNavigation = ({ links }: NavigationProps) => {
|
|||||||
<>
|
<>
|
||||||
<Hamburger open={open} onOpenChange={setOpen} className="lg:hidden" />
|
<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
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute inset-0 bg-black/80 opacity-0 transition-opacity duration-500 ease-out",
|
"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>
|
||||||
<div
|
<div
|
||||||
className={cn(
|
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,
|
"pointer-events-auto translate-y-0": open,
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user