From e367439bdd679138be7d64dbd57720808bdb445f Mon Sep 17 00:00:00 2001 From: R-J Lim Date: Mon, 15 Apr 2024 21:24:32 +0900 Subject: [PATCH] Fix element overlays going off screen sometimes - On netflix the video element itself can be bigger than the screen --- extension/src/services/element-overlay.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/extension/src/services/element-overlay.ts b/extension/src/services/element-overlay.ts index 5dd3321b..5bf04418 100755 --- a/extension/src/services/element-overlay.ts +++ b/extension/src/services/element-overlay.ts @@ -314,12 +314,13 @@ export class CachingElementOverlay implements ElementOverlay { const rect = this.targetElement.getBoundingClientRect(); container.style.left = rect.left + rect.width / 2 + 'px'; container.style.maxWidth = rect.width + 'px'; + const clampedTop = Math.max(0, rect.top); if (this.offsetAnchor === OffsetAnchor.bottom) { - container.style.top = rect.top + rect.height + window.scrollY - this.contentPositionOffset + 'px'; + container.style.top = clampedTop + rect.height + window.scrollY - this.contentPositionOffset + 'px'; container.style.bottom = ''; } else { - container.style.top = rect.top + window.scrollY + this.contentPositionOffset + 'px'; + container.style.top = clampedTop + window.scrollY + this.contentPositionOffset + 'px'; container.style.bottom = ''; } } @@ -481,12 +482,13 @@ export class DefaultElementOverlay implements ElementOverlay { const rect = this.targetElement.getBoundingClientRect(); container.style.left = rect.left + rect.width / 2 + 'px'; container.style.maxWidth = rect.width + 'px'; + const clampedTop = Math.max(0, rect.top); if (this.offsetAnchor === OffsetAnchor.bottom) { - container.style.top = rect.top + rect.height + window.scrollY - this.contentPositionOffset + 'px'; + container.style.top = clampedTop + rect.height + window.scrollY - this.contentPositionOffset + 'px'; container.style.bottom = ''; } else { - container.style.top = rect.top + window.scrollY + this.contentPositionOffset + 'px'; + container.style.top = clampedTop + window.scrollY + this.contentPositionOffset + 'px'; container.style.bottom = ''; } }