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

Improve video display layering and visibility during interactions

Browse Source 
Adjust CSS to ensure video elements and their containers display correctly when hovered over, preventing overlap issues by setting appropriate z-index values and managing overflow properties for various container types.

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:18:57 +00:00
parent 5bb9153c99
commit f7b9d034ca
1 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/index.css
View File

@ -389,16 +389,29 @@ input[data-testid*="search"]::placeholder {
/* Force all parent elements to be overflow visible when video card is hovered */ /* Force all parent elements to be overflow visible when video card is hovered */
.video-card:hover { .video-card:hover {
z-index: 999999 !important; z-index: 2147483647 !important;
} }
/* Only target specific carousel containers, not scroll containers */ /* Force specific containers to be overflow visible when video is hovered */
.carousel-track:has(.video-card:hover), .carousel-track:has(.video-card:hover) {
.netflix-grid-container:has(.video-card:hover),
div:has(.video-card:hover):not([class*="overflow-x-auto"]):not([class*="overflow-y-auto"]) {
overflow: visible !important; overflow: visible !important;
} }
.netflix-grid-container:has(.video-card:hover) {
overflow: visible !important;
}
/* Force parent divs to be overflow visible, but exclude scroll containers */
div:has(.video-card:hover) {
overflow: visible !important;
}
/* Restore scroll behavior only for horizontal scroll containers */
div[class*="overflow-x-auto"]:has(.video-card:hover) {
overflow-x: auto !important;
overflow-y: visible !important;
}
/* Hide picture-in-picture button on all video elements */ /* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button { video::-webkit-media-controls-picture-in-picture-button {
display: none !important; display: none !important;