prevent popup from going off the window

1 files changed, 18 insertions, 10 deletions

diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 2a2f7c54..398e975e 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -23,11 +23,13 @@ class Popup {
         this.offset = 10;
     }
 
-    showAt(pos, content) {
+    show(rect, content) {
         this.inject();
 
-        this.container.style.left = pos.x + 'px';
-        this.container.style.top = pos.y + 'px';
+        this.container.style.left = rect.x + 'px';
+        this.container.style.top = rect.y + 'px';
+        this.container.style.height = rect.height + 'px';
+        this.container.style.width = rect.width + 'px';
         this.container.style.visibility = 'visible';
 
         this.setContent(content);
@@ -38,17 +40,23 @@ class Popup {
 
         const containerRect = this.container.getBoundingClientRect();
 
-        let posX = elementRect.left;
-        if (posX + containerRect.width >= window.innerWidth) {
-            posX = window.innerWidth - containerRect.width;
+        let x = elementRect.left;
+        let width = containerRect.width;
+        if (x + width >= window.innerWidth) {
+            const widthMax = window.innerWidth - x;
+            width = Math.min(width, widthMax);
+            x = window.innerWidth - width;
         }
 
-        let posY = elementRect.bottom + this.offset;
-        if (posY + containerRect.height >= window.innerHeight) {
-            posY = elementRect.top - containerRect.height - this.offset;
+        let y = elementRect.bottom + this.offset;
+        let height = containerRect.height;
+        if (y + height >= window.innerHeight) {
+            const heightMax = window.innerHeight - y - this.offset;
+            height = Math.min(height, heightMax);
+            y = elementRect.top - height - this.offset;
         }
 
-        this.showAt({x: posX, y: posY}, content);
+        this.show({x, y, width, height}, content);
     }
 
     visible() {