From 39df2abcdc1d1f8a5fe1b07934004a5676a02dd1 Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Sun, 30 Nov 2025 10:37:52 +0800
Subject: [PATCH] fix: Resolve z-index stacking context issues by removing
 `contain` property and enhance card hover effects with explicit z-index and
 shadow transitions.

---
 app/styles/base.css                   |  1 -
 components/adult/AdultContentGrid.tsx | 11 +++++++----
 components/home/MovieCard.tsx         | 11 +++++++----
 components/search/VideoCard.tsx       | 15 ++++++++++-----
 components/search/VideoGrid.tsx       |  2 +-
 5 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 0ec7f9b..4a4aaeb 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -99,7 +99,6 @@ nav:where(.sticky, .fixed),
 [class*="grid"]>* {
     content-visibility: auto;
     contain-intrinsic-size: auto 400px;
-    contain: layout style paint;
 }
 
 [class*="grid"]>a {
diff --git a/components/adult/AdultContentGrid.tsx b/components/adult/AdultContentGrid.tsx
index 6a64f7e..86c1fad 100644
--- a/components/adult/AdultContentGrid.tsx
+++ b/components/adult/AdultContentGrid.tsx
@@ -42,7 +42,6 @@ export function AdultContentGrid({
                     <Link
                         key={`${video.source}-${video.vod_id}`}
                         href={`/secret?q=${encodeURIComponent(video.vod_name)}`}
-                        className="group cursor-pointer"
                         onClick={(e) => {
                             // Allow default behavior for modifier keys (new tab, etc.)
                             if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
@@ -50,13 +49,17 @@ export function AdultContentGrid({
                             e.preventDefault();
                             onVideoClick?.(video);
                         }}
+                        className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out"
                         style={{
-                            contain: 'layout style paint',
+                            position: 'relative',
+                            zIndex: 1,
                             contentVisibility: 'auto'
                         }}
+                        onMouseEnter={(e) => (e.currentTarget.style.zIndex = '100')}
+                        onMouseLeave={(e) => (e.currentTarget.style.zIndex = '1')}
                     >
-                        <Card hover className="overflow-hidden p-0 h-full" blur={false}>
-                            <div className="relative aspect-[2/3] overflow-hidden bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
+                        <Card hover={false} className="p-0 h-full shadow-[0_2px_8px_var(--shadow-color)] hover:shadow-[0_8px_24px_var(--shadow-color)] transition-shadow duration-200 ease-out" blur={false}>
+                            <div className="relative aspect-[2/3] bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
                                 {video.vod_pic ? (
                                     <Image
                                         src={video.vod_pic}
diff --git a/components/home/MovieCard.tsx b/components/home/MovieCard.tsx
index b8acbf7..68c3e31 100644
--- a/components/home/MovieCard.tsx
+++ b/components/home/MovieCard.tsx
@@ -33,14 +33,17 @@ export const MovieCard = memo(function MovieCard({ movie, onMovieClick }: MovieC
         e.preventDefault();
         onMovieClick(movie);
       }}
-      className="group cursor-pointer"
+      className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out"
       style={{
-        contain: 'layout style paint',
+        position: 'relative',
+        zIndex: 1,
         contentVisibility: 'auto'
       }}
+      onMouseEnter={(e) => (e.currentTarget.style.zIndex = '100')}
+      onMouseLeave={(e) => (e.currentTarget.style.zIndex = '1')}
     >
-      <Card hover className="overflow-hidden p-0 h-full" blur={false}>
-        <div className="relative aspect-[2/3] overflow-hidden bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
+      <Card hover={false} className="p-0 h-full shadow-[0_2px_8px_var(--shadow-color)] hover:shadow-[0_8px_24px_var(--shadow-color)] transition-shadow duration-200 ease-out" blur={false}>
+        <div className="relative aspect-[2/3] bg-[var(--glass-bg)] rounded-[var(--radius-2xl)]">
           <Image
             src={movie.cover}
             alt={movie.title}
diff --git a/components/search/VideoCard.tsx b/components/search/VideoCard.tsx
index dba1cab..13a3f64 100644
--- a/components/search/VideoCard.tsx
+++ b/components/search/VideoCard.tsx
@@ -28,7 +28,7 @@ export const VideoCard = memo<VideoCardProps>(({
     return (
         <div
             style={{
-                contain: 'layout style paint',
+                // contain: 'layout style paint', // Removed to fix z-index stacking context
                 contentVisibility: 'auto',
             }}
         >
@@ -39,19 +39,24 @@ export const VideoCard = memo<VideoCardProps>(({
                 role="listitem"
                 aria-label={`${video.vod_name}${video.vod_remarks ? ` - ${video.vod_remarks}` : ''}`}
                 prefetch={false}
+                className="group cursor-pointer hover:translate-y-[-2px] transition-transform duration-200 ease-out block h-full"
+                style={{
+                    position: 'relative',
+                    zIndex: 1,
+                }}
+                onMouseEnter={(e) => (e.currentTarget.style.zIndex = '100')}
+                onMouseLeave={(e) => (e.currentTarget.style.zIndex = '1')}
             >
                 <Card
-                    className="p-0 overflow-hidden group cursor-pointer flex flex-col h-full bg-[var(--bg-color)]/50 backdrop-blur-none saturate-100 shadow-sm border-[var(--glass-border)] hover:shadow-lg transition-shadow"
+                    className="p-0 flex flex-col h-full bg-[var(--bg-color)]/50 backdrop-blur-none saturate-100 shadow-sm border-[var(--glass-border)] hover:shadow-lg transition-shadow"
                     hover={false}
                     blur={false}
                     style={{
-                        willChange: 'transform',
-                        transform: 'translate3d(0,0,0)',
                         backfaceVisibility: 'hidden',
                     }}
                 >
                     {/* Poster */}
-                    <div className="relative aspect-[2/3] bg-[color-mix(in_srgb,var(--glass-bg)_50%,transparent)] overflow-hidden rounded-[var(--radius-2xl)]">
+                    <div className="relative aspect-[2/3] bg-[color-mix(in_srgb,var(--glass-bg)_50%,transparent)] rounded-[var(--radius-2xl)]">
                         {video.vod_pic ? (
                             <Image
                                 src={video.vod_pic}
diff --git a/components/search/VideoGrid.tsx b/components/search/VideoGrid.tsx
index 3df511e..c5f3f34 100644
--- a/components/search/VideoGrid.tsx
+++ b/components/search/VideoGrid.tsx
@@ -85,7 +85,7 @@ export const VideoGrid = memo(function VideoGrid({ videos, className = '' }: Vid
         style={{
           // Optimize rendering performance
           // willChange: 'auto', // Removed to let browser decide
-          contain: 'layout style paint',
+          // contain: 'layout style paint', // Removed to fix z-index stacking context
           contentVisibility: 'auto',
         }}
       >