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 */}
<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" }}
>
{/* Floating grid dots decoration */}
@@ -31,7 +31,7 @@ export const ReportFan = () => {
<div className="relative flex aspect-[3/2.2] items-end justify-center">
{/* Left page — tilted, peeking */}
<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={{
transform: "rotate(-8deg) translateY(-4%) translateX(6%)",
transformOrigin: "bottom center",
@@ -52,7 +52,7 @@ export const ReportFan = () => {
{/* Right page — tilted, peeking */}
<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={{
transform: "rotate(8deg) translateY(-4%) translateX(-6%)",
transformOrigin: "bottom center",
@@ -72,7 +72,7 @@ export const ReportFan = () => {
{/* Center page — hero, elevated */}
<div
className="relative z-10 w-[52%] transition-transform duration-500 ease-out hover:scale-[1.03]"
className="relative z-10 w-[52%]"
style={{
transform: "translateY(-2%)",
}}