fix: prevent scroll blocking on report fan decorative element

Add pointer-events-none and remove hover scale transforms.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-02-22 16:01:59 +00:00
parent e0bf1b534b
commit e3d8b4d16d

View File

@@ -11,7 +11,7 @@ export const ReportFan = () => {
{/* Fan container with perspective */} {/* Fan container with perspective */}
<div <div
className="relative mx-auto w-[340px] sm:w-[480px] md:w-[620px] lg:w-[740px]" className="pointer-events-none relative mx-auto w-[340px] sm:w-[480px] md:w-[620px] lg:w-[740px]"
style={{ perspective: "1200px" }} style={{ perspective: "1200px" }}
> >
{/* Floating grid dots decoration */} {/* Floating grid dots decoration */}
@@ -31,7 +31,7 @@ export const ReportFan = () => {
<div className="relative flex aspect-[3/2.2] items-end justify-center"> <div className="relative flex aspect-[3/2.2] items-end justify-center">
{/* Left page — tilted, peeking */} {/* Left page — tilted, peeking */}
<div <div
className="absolute bottom-0 left-0 z-0 w-[42%] transition-transform duration-500 ease-out hover:scale-[1.02]" className="absolute bottom-0 left-0 z-0 w-[42%]"
style={{ style={{
transform: "rotate(-8deg) translateY(-4%) translateX(6%)", transform: "rotate(-8deg) translateY(-4%) translateX(6%)",
transformOrigin: "bottom center", transformOrigin: "bottom center",
@@ -52,7 +52,7 @@ export const ReportFan = () => {
{/* Right page — tilted, peeking */} {/* Right page — tilted, peeking */}
<div <div
className="absolute right-0 bottom-0 z-0 w-[42%] transition-transform duration-500 ease-out hover:scale-[1.02]" className="absolute right-0 bottom-0 z-0 w-[42%]"
style={{ style={{
transform: "rotate(8deg) translateY(-4%) translateX(-6%)", transform: "rotate(8deg) translateY(-4%) translateX(-6%)",
transformOrigin: "bottom center", transformOrigin: "bottom center",
@@ -72,7 +72,7 @@ export const ReportFan = () => {
{/* Center page — hero, elevated */} {/* Center page — hero, elevated */}
<div <div
className="relative z-10 w-[52%] transition-transform duration-500 ease-out hover:scale-[1.03]" className="relative z-10 w-[52%]"
style={{ style={{
transform: "translateY(-2%)", transform: "translateY(-2%)",
}} }}