Fix scrolling for desktop video modal

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 {

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();
   }