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

Improve video modal display and responsiveness across all devices

Browse Source 
Update the `BunnyVideoModal` component and `index.css` to ensure the modal correctly covers the entire viewport (100vw width, 100vh height) with fixed positioning (`top: 0`, `left: 0`, `right: 0`, `bottom: 0`), addressing issues with pop-ups appearing partially off-screen.

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 15:20:01 +00:00
parent 16fa5e0dd1
commit feec173d19
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -169,7 +169,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
return ( return (
<div <div
className="modal-overlay 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: 2147483647, backgroundColor: '#1f2937', position: 'fixed' }} style={{
zIndex: 2147483647,
backgroundColor: '#1f2937',
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: '100vw',
height: '100vh'
}}
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">

6
client/src/index.css
View File

@ -168,6 +168,12 @@
.modal-overlay { .modal-overlay {
z-index: 2147483647 !important; z-index: 2147483647 !important;
position: fixed !important; position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
} }
/* Keep video cards low */ /* Keep video cards low */