diff --git a/app/static/public/css/video.css b/app/static/public/css/video.css
index 1dc1784..b4869d5 100644
--- a/app/static/public/css/video.css
+++ b/app/static/public/css/video.css
@@ -674,6 +674,12 @@ body {
#cacheVideoModal .modal-content {
position: fixed;
+ left: 12px;
+ top: 12px;
+ right: auto;
+ bottom: auto;
+ margin: 0;
+ transform: none;
width: min(560px, calc(100vw - 24px));
max-height: min(72vh, 560px);
border-radius: 12px;
diff --git a/app/static/public/js/video.js b/app/static/public/js/video.js
index fcbe8c8..ee855a4 100644
--- a/app/static/public/js/video.js
+++ b/app/static/public/js/video.js
@@ -1100,12 +1100,15 @@
if (!(content instanceof HTMLElement)) return;
const anchor = cacheModalAnchorEl instanceof HTMLElement ? cacheModalAnchorEl : null;
if (!anchor) return;
+ content.style.right = 'auto';
+ content.style.bottom = 'auto';
+ content.style.transform = 'none';
const rect = anchor.getBoundingClientRect();
const margin = 8;
const vw = window.innerWidth || document.documentElement.clientWidth || 0;
const vh = window.innerHeight || document.documentElement.clientHeight || 0;
const width = Math.min(560, Math.max(280, vw - 24));
- let left = rect.left;
+ let left = rect.left + (rect.width / 2) - (width / 2);
if (left + width > vw - 12) {
left = vw - 12 - width;
}
@@ -1125,6 +1128,7 @@
cacheVideoModal.classList.remove('hidden');
cacheVideoModal.classList.add('is-open');
positionCacheVideoModal();
+ requestAnimationFrame(() => positionCacheVideoModal());
}
function closeCacheVideoModal() {
diff --git a/app/static/public/pages/video.html b/app/static/public/pages/video.html
index 01ee717..5e62e84 100644
--- a/app/static/public/pages/video.html
+++ b/app/static/public/pages/video.html
@@ -18,7 +18,7 @@
-
+
@@ -315,7 +315,7 @@
-
+