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

Improve video pop-up display by adjusting layering and positioning

Browse Source 
Update CSS to ensure videos on hover correctly layer above other content using a high z-index and relative positioning, including adjustments for parent containers to facilitate proper stacking and visibility.

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:10:02 +00:00
parent 0e554e20a8
commit 78ae5d8f5a
1 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/index.css
View File

@ -387,27 +387,23 @@ input[data-testid*="search"]::placeholder {
opacity: 0;
}
/* Force hover video to break out of all constraints */
/* Working hover video pop-up with maximum z-index */
.individual-video-hover:hover {
z-index: 9999 !important;
z-index: 2147483647 !important;
position: relative !important;
transform: scale(1.05) !important;
transition: all 0.3s ease !important;
contain: none !important;
clip-path: none !important;
isolation: auto !important;
}
/* Force parent containers to be overflow visible when child is hovered */
*:has(.individual-video-hover:hover) {
overflow: visible !important;
clip-path: none !important;
/* Ensure all carousel containers allow z-index layering */
.individual-video-hover {
position: relative;
}
/* Special handling for scroll containers - allow both horizontal scroll and vertical visibility */
[class*="overflow-x-auto"]:has(.individual-video-hover:hover) {
overflow-x: auto !important;
overflow-y: visible !important;
/* 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 */