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

Improve carousel scrolling and modal display across the platform

Browse Source 
Update z-index for modals to ensure they display correctly, adjust carousel scroll amount and behavior, and refine video card z-indexing.

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
This commit is contained in:
sebastjanartic 2025-08-29 14:38:22 +00:00
parent ee5cef0645
commit dde1b37180
7 changed files with 25 additions and 19 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; if (!isOpen) return null;
return ( return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 9999999 }}> <div className="modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: 2147483647, position: 'fixed' }}>
<div className="bg-white dark:bg-gray-900 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"> <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="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"> <div className="flex items-center justify-between">

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

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

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

@ -141,22 +141,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
if (scrollRef.current) { if (scrollRef.current) {
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
const containerWidth = scrollRef.current.clientWidth; const containerWidth = scrollRef.current.clientWidth;
const scrollAmount = isMobile ? containerWidth * 0.8 : containerWidth * 0.6; const scrollAmount = isMobile ? containerWidth * 0.9 : containerWidth * 0.7;
const currentScroll = scrollRef.current.scrollLeft;
const maxScroll = scrollRef.current.scrollWidth - scrollRef.current.clientWidth;
let targetScroll;
if (direction === 'left') { if (direction === 'left') {
targetScroll = Math.max(0, currentScroll - scrollAmount); scrollRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
} else { } else {
targetScroll = Math.min(maxScroll, currentScroll + scrollAmount); scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
} }
scrollRef.current.scrollTo({
left: targetScroll,
behavior: 'smooth'
});
} }
}; };

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

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

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

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

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

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

15
client/src/index.css
View File

@ -163,6 +163,21 @@
.animation-delay-150 { .animation-delay-150 {
animation-delay: 150ms; animation-delay: 150ms;
} }
/* Force modal z-index above everything */
.modal-overlay {
z-index: 2147483647 !important;
position: fixed !important;
}
/* Keep video cards low */
.video-card {
z-index: 1 !important;
}
.video-card:hover {
z-index: 5 !important;
}
} }
/* Video edit modal styles */ /* Video edit modal styles */