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:
@@ -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%)",
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user