From 622c829b46aa606ffa2f8a3449eae95dc0bbb00d Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Sep 2025 08:41:11 -0400
Subject: [PATCH 1/6] Make desktop video modal full screen

---
 components/video-modal.html |  6 +++---
 css/style.css               | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 057980c9..ef96d09f 100644
--- a/components/video-modal.html
+++ b/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>
 
diff --git a/css/style.css b/css/style.css
index dffc482a..a9b80981 100644
--- a/css/style.css
+++ b/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);

From d5551fd6a94768bb2471969ffc0f3ec62c813bd0 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Sep 2025 08:54:28 -0400
Subject: [PATCH 2/6] Make desktop video modal occupy the full viewport

---
 components/video-modal.html | 14 ++----
 css/style.css               | 94 ++++++++++++++++++++++++++++---------
 js/app.js                   |  2 +
 3 files changed, 79 insertions(+), 31 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index ef96d09f..af38141e 100644
--- a/components/video-modal.html
+++ b/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>
diff --git a/css/style.css b/css/style.css
index a9b80981..b61ed7cd 100644
--- a/css/style.css
+++ b/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 */
diff --git a/js/app.js b/js/app.js
index 8f3ec6f9..e3aa5464 100644
--- a/js/app.js
+++ b/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;

From ebb289a80c721948686d76fddeddb1ca4643735a Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Sep 2025 09:03:49 -0400
Subject: [PATCH 3/6] Fix scrolling for desktop video modal

---
 css/style.css | 18 ++++++++++++------
 js/app.js     | 13 +++++++++++--
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/css/style.css b/css/style.css
index b61ed7cd..a8c46ca0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -253,7 +253,8 @@ header img {
   align-items: stretch;
   justify-content: stretch;
   background-color: #000;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   overscroll-behavior: contain;
 }
 
@@ -286,12 +287,14 @@ header img {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   max-width: none;
   max-height: none;
   border-radius: 0;
   background-color: #0f172a;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   box-shadow: none;
   animation: fadeIn var(--modal-motion-duration) ease-out;
 }
@@ -303,6 +306,7 @@ header img {
   position: sticky;
   top: 0;
   z-index: 51;
+  flex-shrink: 0;
 }
 
 #playerModal .video-container video {
@@ -312,9 +316,10 @@ header img {
 }
 
 #playerModal .video-info {
-  flex: 1;
-  overflow-y: auto;
+  flex: 0 0 auto;
+  overflow: visible;
   padding: 1.5rem;
+  padding-bottom: 3rem;
 }
 
 body.modal-open {
@@ -390,7 +395,8 @@ body.modal-open {
     max-width: none;
     max-height: none;
     border-radius: 0;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
 
   .video-container {
diff --git a/js/app.js b/js/app.js
index e3aa5464..e7f7d5fc 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1004,9 +1004,11 @@ class bitvidApp {
       if (!modalNav || !playerModal) {
         throw new Error("Modal nav (#modalNav) or #playerModal not found!");
       }
+      const scrollRegion =
+        playerModal.querySelector(".player-modal__content") || playerModal;
       let lastScrollY = 0;
-      playerModal.addEventListener("scroll", (e) => {
-        const currentScrollY = e.target.scrollTop;
+      scrollRegion.addEventListener("scroll", () => {
+        const currentScrollY = scrollRegion.scrollTop;
         const shouldShowNav =
           currentScrollY <= lastScrollY || currentScrollY < 50;
         modalNav.style.transform = shouldShowNav
@@ -1146,6 +1148,13 @@ class bitvidApp {
       this.playerModal.style.display = "flex";
       this.playerModal.classList.remove("hidden");
       document.body.classList.add("modal-open");
+      const scrollRegion =
+        this.playerModal.querySelector(".player-modal__content");
+      if (scrollRegion) {
+        scrollRegion.scrollTop = 0;
+      } else {
+        this.playerModal.scrollTop = 0;
+      }
     }
     this.applyModalLoadingPoster();
   }

From 3f293f77fa480d3ffddf4aa105d0405a18066e34 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Sep 2025 09:26:33 -0400
Subject: [PATCH 4/6] Ensure desktop player modal scrolls

---
 css/style.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index a8c46ca0..0188dfc5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -253,8 +253,7 @@ header img {
   align-items: stretch;
   justify-content: stretch;
   background-color: #000;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   overscroll-behavior: contain;
 }
 
@@ -276,6 +275,7 @@ header img {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  min-height: 100vh;
   padding: 0;
   margin: 0;
   overflow: hidden;
@@ -287,8 +287,8 @@ header img {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: auto;
-  min-height: 100%;
+  height: 100%;
+  min-height: 0;
   max-width: none;
   max-height: none;
   border-radius: 0;

From db8178e5730129febe538efd7199ed534178f301 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 29 Sep 2025 09:47:09 -0400
Subject: [PATCH 5/6] Ensure desktop modal owns its scroll surface

---
 components/video-modal.html |  8 ++---
 css/style.css               | 62 +++++++++----------------------------
 2 files changed, 18 insertions(+), 52 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index af38141e..ce969f19 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -1,7 +1,7 @@
 <!-- components/video-modal.html -->
 <div id="playerModal" class="player-modal hidden">
-  <div class="modal-container player-modal__container">
-    <div class="modal-content player-modal__content">
+  <div class="player-modal__container">
+    <div class="player-modal__content">
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
@@ -119,11 +119,11 @@
         </div>
       </div>
 
-      <div class="video-container player-modal__video">
+      <div class="player-modal__video">
         <video id="modalVideo" class="w-full aspect-video" controls></video>
       </div>
 
-      <div class="video-info player-modal__info">
+      <div class="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>
diff --git a/css/style.css b/css/style.css
index 0188dfc5..11c074ee 100644
--- a/css/style.css
+++ b/css/style.css
@@ -252,7 +252,8 @@ header img {
   flex-direction: column;
   align-items: stretch;
   justify-content: stretch;
-  background-color: #000;
+  background-color: #0f172a;
+  color: #e2e8f0;
   overflow: hidden;
   overscroll-behavior: contain;
 }
@@ -269,7 +270,7 @@ header img {
   display: flex;
 }
 
-#playerModal .modal-container {
+#playerModal .player-modal__container {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -281,7 +282,7 @@ header img {
   overflow: hidden;
 }
 
-#playerModal .modal-content {
+#playerModal .player-modal__content {
   position: relative;
   flex: 1;
   display: flex;
@@ -290,32 +291,30 @@ header img {
   height: 100%;
   min-height: 0;
   max-width: none;
-  max-height: none;
-  border-radius: 0;
   background-color: #0f172a;
   overflow-x: hidden;
   overflow-y: auto;
   box-shadow: none;
   animation: fadeIn var(--modal-motion-duration) ease-out;
+  -webkit-overflow-scrolling: touch;
 }
 
-#playerModal .video-container {
+#playerModal .player-modal__video {
   width: 100%;
   background-color: #000;
-  border-radius: 0;
   position: sticky;
   top: 0;
   z-index: 51;
   flex-shrink: 0;
 }
 
-#playerModal .video-container video {
+#playerModal .player-modal__video video {
   width: 100%;
   aspect-ratio: 16 / 9;
   background-color: #000;
 }
 
-#playerModal .video-info {
+#playerModal .player-modal__info {
   flex: 0 0 auto;
   overflow: visible;
   padding: 1.5rem;
@@ -326,6 +325,10 @@ body.modal-open {
   overflow: hidden;
 }
 
+body.modal-open #app {
+  overflow: hidden;
+}
+
 /* Modal Content Container */
 .modal-content {
   width: 100%;
@@ -353,15 +356,6 @@ body.modal-open {
   }
 }
 
-/* Video Container */
-.video-container {
-  width: 100%;
-  background-color: black;
-  position: sticky;
-  top: 0;
-  z-index: 51;
-}
-
 /* Modal Video */
 #modalVideo {
   width: 100%;
@@ -369,21 +363,8 @@ body.modal-open {
   background-color: black;
 }
 
-/* Video Info Section */
-.video-info {
-  padding: 1rem;
-  flex: 1;
-  overflow-y: auto;
-}
-
 /* Responsive Adjustments */
 @media (min-width: 768px) {
-  #playerModal {
-    padding: 0;
-    align-items: stretch;
-    justify-content: stretch;
-  }
-
   .modal-content {
     max-width: 64rem;
     max-height: calc(100vh - 4rem); /* Account for padding */
@@ -391,20 +372,9 @@ body.modal-open {
     overflow: visible;
   }
 
-  #playerModal .modal-content {
+  #playerModal .player-modal__content {
     max-width: none;
-    max-height: none;
     border-radius: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  .video-container {
-    position: relative;
-  }
-
-  #playerModal .video-container {
-    position: sticky;
   }
 }
 
@@ -661,14 +631,10 @@ footer a:hover {
   .modal-container {
     padding: 2rem;
   }
-
-  #playerModal .modal-container {
-    padding: 0;
-  }
 }
 
 /* Video info cards */
-.video-info .bg-gray-800\/50 {
+.player-modal__info .bg-gray-800\/50 {
   background-color: rgb(31 41 55 / 0.5);
   backdrop-filter: blur(0.25rem);
 }

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 6/6] 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;