Fix element overlays going off screen sometimes

- On netflix the video element itself can be bigger than the screen
killergerbah · Apr 15, 2024 · e367439 · e367439
1 parent a97c7f3
commit e367439
Showing 1 changed file with 6 additions and 4 deletions.
diff --git 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 = '';
         }
     }