sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ensure all video modals and ad popups appear above other content

Browse Source 
Adjust z-index values across multiple modal and player components to ensure they render on top of other UI elements.

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/mZpi7Z1
This commit is contained in:
sebastjanartic 2025-08-29 11:12:55 +00:00
parent f466c7f288
commit ba913bdd1c
6 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/ad-settings.tsx
View File

@ -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 z-50 p-4">
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999] p-4">
<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">

2
client/src/components/bunny-video-modal.tsx
View File

@ -168,7 +168,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 z-50"
className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-[9999]"
onClick={handleBackdropClick}
style={{ backgroundColor: '#1f2937' }}
>

2
client/src/components/netflix-grid.tsx
View File

@ -203,7 +203,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
};
return (
<div className="relative group mb-8">
<div className="relative group mb-8 overflow-hidden">
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title}
</h2>

2
client/src/components/vast-player.tsx
View File

@ -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 z-50">
<div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-[9999]">
<div className="relative w-full max-w-6xl mx-4">
{/* Close button */}
<Button

3
client/src/components/video-card.tsx
View File

@ -168,7 +168,8 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
transformStyle: 'preserve-3d',
transition: 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), z-index 0.1s ease',
willChange: 'transform',
zIndex: isHovered ? '99999 !important' : 'auto'
zIndex: isHovered ? 50 : 'auto',
position: isHovered ? 'relative' : 'static'
}}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}

2
client/src/components/video-modal.tsx
View File

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