From b7d972cbf528bc8c00c318c26f13a574ca3a4189 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 10:43:07 +0000
Subject: [PATCH] Adjust video card popup behavior and appearance for better
 display

Modify the video card component to adjust the popup overlay's positioning, size, and styling to ensure it remains within the card boundaries and improves visual presentation. This includes changes to class names, element sizes, and gradient overlays.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/P3O2FU7
---
 client/src/components/video-card.tsx | 41 ++++++++++++++--------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 76491ee..749e004 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -173,7 +173,7 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
   return (
     <div 
       data-testid={`card-video-${video.id}`}
-      className={`video-card transition-all duration-300 ${showPopup ? 'z-50 scale-150 -translate-y-8' : 'hover:scale-[1.02]'} p-1 md:p-2 ${className}`}
+      className={`video-card transition-all duration-300 hover:scale-[1.02] p-1 md:p-2 ${className} ${showPopup ? 'z-50' : ''}`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -247,41 +247,40 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
         </h3>
       </div>
       
-      {/* Netflix-style popup overlay */}
+      {/* Netflix-style popup overlay - stays within card */}
       {showPopup && (
-        <div className="absolute inset-0 bg-bunny-dark rounded-lg shadow-2xl border border-gray-700 p-4 z-50">
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/80 to-transparent rounded-b-lg p-3">
           {/* Action buttons */}
-          <div className="flex items-center gap-2 mb-3">
+          <div className="flex items-center gap-1.5 mb-2">
             <button 
               onClick={() => onClick?.(video)}
-              className="bg-white text-black rounded-full w-8 h-8 flex items-center justify-center hover:bg-gray-200 transition-colors"
+              className="bg-white text-black rounded-full w-6 h-6 flex items-center justify-center hover:bg-gray-200 transition-colors"
             >
-              <Play className="w-4 h-4 ml-0.5" fill="currentColor" />
+              <Play className="w-3 h-3 ml-0.5" fill="currentColor" />
             </button>
-            <button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors">
-              <Plus className="w-4 h-4" />
+            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
+              <Plus className="w-3 h-3" />
             </button>
-            <button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors">
-              <ThumbsUp className="w-4 h-4" />
+            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors">
+              <ThumbsUp className="w-3 h-3" />
             </button>
-            <button className="border border-gray-500 text-white rounded-full w-8 h-8 flex items-center justify-center hover:border-white transition-colors ml-auto">
-              <ChevronDown className="w-4 h-4" />
+            <button className="border border-gray-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:border-white transition-colors ml-auto">
+              <ChevronDown className="w-3 h-3" />
             </button>
           </div>
           
           {/* Video info */}
           <div className="text-white">
-            <h4 className="font-bold text-sm mb-1 line-clamp-2">{video.title}</h4>
-            <div className="flex items-center gap-2 text-xs text-gray-300 mb-2">
+            <h4 className="font-bold text-xs mb-1 line-clamp-1">{video.title}</h4>
+            <div className="flex items-center gap-2 text-xs text-gray-300">
               <span className="border border-gray-500 px-1 rounded text-xs">HD</span>
               <span>{formatDuration(video.duration)}</span>
-            </div>
-            <div className="flex items-center gap-1 text-xs text-gray-300">
-              <span>Drama</span>
-              <span>•</span>
-              <span>Thriller</span>
-              <span>•</span>
-              <span>Action</span>
+              {video.category && (
+                <>
+                  <span>•</span>
+                  <span>{video.category}</span>
+                </>
+              )}
             </div>
           </div>
         </div>