Fix desktop video modal scrolling and lock

css/style.css

@@ -252,10 +252,14 @@ header img {
   flex-direction: column;
   align-items: stretch;
   justify-content: stretch;
+  width: 100vw;
+  height: 100vh;
   background-color: #0f172a;
   color: #e2e8f0;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 #nostrFormModal,
@@ -279,7 +283,6 @@ header img {
   min-height: 100vh;
   padding: 0;
   margin: 0;
-  overflow: hidden;
 }
 
 #playerModal .player-modal__content {
@@ -288,15 +291,12 @@ header img {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
-  min-height: 0;
+  min-height: 100%;
   max-width: none;
   background-color: #0f172a;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: visible;
   box-shadow: none;
   animation: fadeIn var(--modal-motion-duration) ease-out;
-  -webkit-overflow-scrolling: touch;
 }
 
 #playerModal .player-modal__video {
@@ -316,15 +316,23 @@ header img {
 
 #playerModal .player-modal__info {
   flex: 0 0 auto;
-  overflow: visible;
   padding: 1.5rem;
   padding-bottom: 3rem;
 }
 
+html.modal-open {
+  overflow: hidden;
+}
+
 body.modal-open {
   overflow: hidden;
 }
 
+html.modal-open,
+body.modal-open {
+  height: 100%;
+}
+
 body.modal-open #app {
   overflow: hidden;
 }

js/app.js

@@ -1148,13 +1148,11 @@ class bitvidApp {
       this.playerModal.style.display = "flex";
       this.playerModal.classList.remove("hidden");
       document.body.classList.add("modal-open");
+      document.documentElement.classList.add("modal-open");
       const scrollRegion =
-        this.playerModal.querySelector(".player-modal__content");
-      if (scrollRegion) {
-        scrollRegion.scrollTop = 0;
-      } else {
-        this.playerModal.scrollTop = 0;
-      }
+        this.playerModal.querySelector(".player-modal__content") ||
+        this.playerModal;
+      scrollRegion.scrollTop = 0;
     }
     this.applyModalLoadingPoster();
   }
@@ -5786,6 +5784,7 @@ class bitvidApp {
       this.playerModal.classList.add("hidden");
     }
     document.body.classList.remove("modal-open");
+    document.documentElement.classList.remove("modal-open");
     if (typeof this.modalPosterCleanup === "function") {
       this.modalPosterCleanup();
       this.modalPosterCleanup = null;