Make desktop video modal full screen

components/video-modal.html

@@ -1,10 +1,10 @@
 <!-- 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"
+    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-6xl my-0 rounded-lg relative"
+      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"
     >
       <!-- Navigation bar - sliding at top -->
       <div
@@ -123,7 +123,7 @@
         </div>
       </div>
 
-      <div class="video-container w-full bg-black rounded-t-lg overflow-hidden">
+      <div class="video-container w-full bg-black rounded-t-lg lg:rounded-none overflow-hidden">
         <video id="modalVideo" class="w-full aspect-video" controls></video>
       </div>
 

css/style.css

@@ -594,6 +594,23 @@ footer a:hover {
   }
 }
 
+@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 */
 .video-info .bg-gray-800\/50 {
   background-color: rgb(31 41 55 / 0.5);