Improve video player navigation and modal visibility with hover effects

Update z-index for modals to ensure they appear above other content, and enhance category row scrolling by making navigation buttons visible on hover rather than always hidden.

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/QCN70f2

client/src/components/ad-settings.tsx

@@ -116,7 +116,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 999999 }}>
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 9999999 }}>
       <div className="bg-white dark:bg-gray-900 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
         <div className="sticky top-0 bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center justify-between">

client/src/components/bunny-video-modal.tsx

@@ -169,7 +169,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
   return (
     <div 
       className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center"
-      style={{ zIndex: 999999, backgroundColor: '#1f2937' }}
+      style={{ zIndex: 9999999, backgroundColor: '#1f2937' }}
       onClick={handleBackdropClick}
     >
       <div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">

client/src/components/netflix-grid.tsx

@@ -134,6 +134,8 @@ interface CategoryRowProps {
 function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const scrollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const [isLeftButtonHovered, setIsLeftButtonHovered] = useState(false);
+  const [isRightButtonHovered, setIsRightButtonHovered] = useState(false);
 
   const scroll = (direction: 'left' | 'right') => {
     if (scrollRef.current) {
@@ -195,7 +197,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
   };
 
   return (
-    <div className="relative group mb-8 overflow-hidden">
+    <div className="relative group mb-8">
       <h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
         {category.title}
       </h2>
@@ -210,13 +212,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           }}
           onMouseEnter={(e) => {
             e.stopPropagation();
+            setIsLeftButtonHovered(true);
             startAutoScroll('left');
           }}
           onMouseLeave={(e) => {
             e.stopPropagation();
+            setIsLeftButtonHovered(false);
             stopAutoScroll();
           }}
-          className="hidden md:flex absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg"
+          className={`${isLeftButtonHovered ? 'flex' : 'hidden md:group-hover:flex'} absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
           data-testid="button-scroll-left"
         >
           <ChevronLeft className="w-6 h-6 text-white" />
@@ -231,13 +235,15 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           }}
           onMouseEnter={(e) => {
             e.stopPropagation();
+            setIsRightButtonHovered(true);
             startAutoScroll('right');
           }}
           onMouseLeave={(e) => {
             e.stopPropagation();
+            setIsRightButtonHovered(false);
             stopAutoScroll();
           }}
-          className="hidden md:flex absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg"
+          className={`${isRightButtonHovered ? 'flex' : 'hidden md:group-hover:flex'} absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg`}
           data-testid="button-scroll-right"
         >
           <ChevronRight className="w-6 h-6 text-white" />

client/src/components/vast-player.tsx

@@ -270,7 +270,7 @@ export default function VASTPlayer({ video, onClose, vastTagUrl, enableAds = tru
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 999999 }}>
+    <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center" style={{ zIndex: 9999999 }}>
       <div className="relative w-full max-w-6xl mx-4">
         {/* Close button */}
         <Button

client/src/components/video-modal.tsx

@@ -438,7 +438,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
   return (
     <div 
       className="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
-      style={{ zIndex: 999999 }}
+      style={{ zIndex: 9999999 }}
       onClick={handleBackdropClick}
       data-testid="modal-video"
     >