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 @@ - +