Make desktop video modal occupy the full viewport

components/video-modal.html

@@ -1,11 +1,7 @@
 <!-- components/video-modal.html -->
-<div id="playerModal" class="fixed inset-0 bg-black/90 z-50 hidden">
-  <div
-    class="modal-container h-full w-full flex items-start justify-center overflow-y-auto lg:items-stretch lg:justify-center"
-  >
-    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-full lg:w-full lg:h-full my-0 rounded-lg lg:rounded-none relative lg:overflow-y-auto"
-    >
+<div id="playerModal" class="player-modal hidden">
+  <div class="modal-container player-modal__container">
+    <div class="modal-content player-modal__content">
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
@@ -123,11 +119,11 @@
         </div>
       </div>
 
-      <div class="video-container w-full bg-black rounded-t-lg lg:rounded-none overflow-hidden">
+      <div class="video-container player-modal__video">
         <video id="modalVideo" class="w-full aspect-video" controls></video>
       </div>
 
-      <div class="video-info p-6">
+      <div class="video-info player-modal__info">
         <!-- Title and icons row -->
         <div class="flex items-center justify-between mb-2">
           <h2 id="videoTitle" class="text-2xl font-bold text-white"></h2>

css/style.css

@@ -247,14 +247,14 @@ header img {
 #playerModal {
   position: fixed;
   inset: 0;
-  background-color: rgb(0 0 0 / 0.9); /* You can adjust opacity if needed */
-  z-index: 50;
-  display: none; /* Hidden by default */
+  z-index: 100;
+  display: none;
   flex-direction: column;
-  overflow-y: auto;
+  align-items: stretch;
+  justify-content: stretch;
+  background-color: #000;
+  overflow: hidden;
   overscroll-behavior: contain;
-  backdrop-filter: blur(0.625rem);
-  -webkit-backdrop-filter: blur(0.625rem); /* For Safari support */
 }
 
 #nostrFormModal,
@@ -269,6 +269,58 @@ header img {
   display: flex;
 }
 
+#playerModal .modal-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+#playerModal .modal-content {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  background-color: #0f172a;
+  overflow: hidden;
+  box-shadow: none;
+  animation: fadeIn var(--modal-motion-duration) ease-out;
+}
+
+#playerModal .video-container {
+  width: 100%;
+  background-color: #000;
+  border-radius: 0;
+  position: sticky;
+  top: 0;
+  z-index: 51;
+}
+
+#playerModal .video-container video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+}
+
+#playerModal .video-info {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+body.modal-open {
+  overflow: hidden;
+}
+
 /* Modal Content Container */
 .modal-content {
   width: 100%;
@@ -322,9 +374,9 @@ header img {
 /* Responsive Adjustments */
 @media (min-width: 768px) {
   #playerModal {
-    padding: 2rem;
-    align-items: center;
-    justify-content: center;
+    padding: 0;
+    align-items: stretch;
+    justify-content: stretch;
   }
 
   .modal-content {
@@ -334,9 +386,20 @@ header img {
     overflow: visible;
   }
 
+  #playerModal .modal-content {
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+    overflow: hidden;
+  }
+
   .video-container {
     position: relative;
   }
+
+  #playerModal .video-container {
+    position: sticky;
+  }
 }
 
 #modalNav {
@@ -592,23 +655,10 @@ footer a:hover {
   .modal-container {
     padding: 2rem;
   }
-}
 
-@media (min-width: 1024px) {
   #playerModal .modal-container {
     padding: 0;
   }
-
-  #playerModal .modal-content {
-    max-width: 100%;
-    width: 100%;
-    height: 100%;
-    border-radius: 0;
-  }
-
-  #playerModal .video-container {
-    border-radius: 0;
-  }
 }
 
 /* Video info cards */

js/app.js

@@ -1145,6 +1145,7 @@ class bitvidApp {
     if (this.playerModal) {
       this.playerModal.style.display = "flex";
       this.playerModal.classList.remove("hidden");
+      document.body.classList.add("modal-open");
     }
     this.applyModalLoadingPoster();
   }
@@ -5775,6 +5776,7 @@ class bitvidApp {
       this.playerModal.style.display = "none";
       this.playerModal.classList.add("hidden");
     }
+    document.body.classList.remove("modal-open");
     if (typeof this.modalPosterCleanup === "function") {
       this.modalPosterCleanup();
       this.modalPosterCleanup = null;