From feec173d19f620e209e8b6c71bb82cd22bc4a657 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:20:01 +0000
Subject: [PATCH] Improve video modal display and responsiveness across all
 devices

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
---
 client/src/components/bunny-video-modal.tsx | 12 +++++++++++-
 client/src/index.css                        |  6 ++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/components/bunny-video-modal.tsx b/client/src/components/bunny-video-modal.tsx
index d0527c7..db921b2 100644
--- a/client/src/components/bunny-video-modal.tsx
+++ b/client/src/components/bunny-video-modal.tsx
@@ -169,7 +169,17 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
   return (
     <div 
       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}
     >
       <div className="relative w-full h-full max-w-7xl mx-auto p-4 flex flex-col">
diff --git a/client/src/index.css b/client/src/index.css
index 79dae25..38e251e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -168,6 +168,12 @@
   .modal-overlay {
     z-index: 2147483647 !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 */