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