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

Improve video carousel visibility and hover effects

Browse Source 
Adjust overflow properties in SimpleCarousel component and refine z-index for hover effects in index.css.

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/kdQ95gE
This commit is contained in:
sebastjanartic 2025-08-29 18:12:48 +00:00
parent 78ae5d8f5a
commit c5ac95846d
2 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/simple-carousel.tsx
View File

@ -96,12 +96,12 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
}, [category.videos.length]);
return (
<div className="relative group mb-8 overflow-visible">
<div className="relative group mb-8" style={{ overflow: 'visible' }}>
<h2 className="text-2xl font-bold text-bunny-light mb-6 px-4">
{category.title}
</h2>
<div className="relative overflow-visible">
<div className="relative" style={{ overflow: 'visible' }}>
{/* Left scroll button */}
<button
onClick={() => scroll('left')}
@ -125,13 +125,14 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
{/* Scroll container */}
<div
ref={scrollContainerRef}
className="overflow-x-auto overflow-y-visible"
className="overflow-x-auto"
style={{
overflowY: 'visible',
scrollbarWidth: 'none',
msOverflowStyle: 'none'
}}
>
<div className="flex space-x-4 pb-4 w-max overflow-visible">
<div className="flex space-x-4 pb-4 w-max" style={{ overflow: 'visible' }}>
{/* Create many copies for infinite feel */}
{Array.from({ length: 20 }).map((_, copyIndex) =>
category.videos.map((video, videoIndex) => (

15
client/src/index.css
View File

@ -387,25 +387,14 @@ input[data-testid*="search"]::placeholder {
opacity: 0;
}
/* Working hover video pop-up with maximum z-index */
/* Maximum z-index hover effect */
.individual-video-hover:hover {
z-index: 2147483647 !important;
z-index: 9999 !important;
position: relative !important;
transform: scale(1.05) !important;
transition: all 0.3s ease !important;
}
/* Ensure all carousel containers allow z-index layering */
.individual-video-hover {
position: relative;
}
/* Force all parent divs to allow z-index stacking */
div:has(.individual-video-hover:hover) {
position: relative !important;
z-index: auto !important;
}
/* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button {
display: none !important;