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