Fix video resize handle drifting off-screen

The resize observer was persisting any rendered size change, including
incidental reflow from the page's own responsive max-width clamping on
window/viewport resize - not just deliberate corner-handle drags. This
let the stored size drift into a badly non-16:9 box over repeated views
on different window sizes, pushing the actual resize grip far below the
fold. Now only persists while the user has mousedown on the video, and
caps rendered height at 80vh as a backstop against already-drifted values.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-24 19:00:40 -04:00
co-authored by Claude Sonnet 5
parent ecabc828ea
commit 1fbf0c9312
2 changed files with 15 additions and 2 deletions
+1 -1
View File
@@ -1 +1 @@
2026-08-24 21:41 UTC — cache category tree walk (fixes ~1s picker lag) 2026-08-24 23:00 UTC — fix video resize handle drifting off-screen
+14 -1
View File
@@ -156,6 +156,7 @@
background: #000; background: #000;
min-width: 320px; min-width: 320px;
min-height: 200px; min-height: 200px;
max-height: 80vh;
} }
.resize-hint { .resize-hint {
text-align: center; text-align: center;
@@ -764,9 +765,21 @@
}) })
.catch(() => { applyingStoredSize = false; }); .catch(() => { applyingStoredSize = false; });
// Only persist a size when the user is actually dragging the
// corner handle - a bare ResizeObserver fires on ANY rendered
// size change, including the page's own responsive
// max-width/max-height clamping on window/viewport resize,
// which isn't a user resize at all and would otherwise get
// saved right back as if it were.
let userResizing = false;
video.addEventListener('mousedown', () => { userResizing = true; });
window.addEventListener('mouseup', () => {
setTimeout(() => { userResizing = false; }, 200);
});
if (window.ResizeObserver) { if (window.ResizeObserver) {
const observer = new ResizeObserver(() => { const observer = new ResizeObserver(() => {
if (applyingStoredSize) return; if (applyingStoredSize || !userResizing) return;
clearTimeout(resizeSaveTimeout); clearTimeout(resizeSaveTimeout);
resizeSaveTimeout = setTimeout(() => { resizeSaveTimeout = setTimeout(() => {
const rect = video.getBoundingClientRect(); const rect = video.getBoundingClientRect();