From 2d0ddd0d3a0687937a5588c5e304c9a634c40bfa Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Sep 2025 09:57:57 -0400
Subject: [PATCH] Fix desktop video modal scrolling and lock

---
 css/style.css | 24 ++++++++++++++++--------
 js/app.js     | 11 +++++------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/css/style.css b/css/style.css
index 11c074ee..5d6ded57 100644
--- a/css/style.css
+++ b/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;
 }
diff --git a/js/app.js b/js/app.js
index e7f7d5fc..e160c6d1 100644
--- a/js/app.js
+++ b/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;