Update full-width popup to stay on screen

2 files changed, 10 insertions, 9 deletions

diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index b9c59da7..5720d8ac 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -39,21 +39,14 @@ iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] {
 iframe.yomichan-float.yomichan-float-full-width {
     border-left: none;
     border-right: none;
-    left: 0 !important;
-    right: 0 !important;
-    width: 100% !important;
     box-sizing: border-box;
     resize: none;
 }
 
 iframe.yomichan-float.yomichan-float-full-width:not(.yomichan-float-above) {
     border-bottom: none;
-    top: auto !important;
-    bottom: 0 !important;
 }
 
 iframe.yomichan-float.yomichan-float-full-width.yomichan-float-above {
     border-top: none;
-    top: 0 !important;
-    bottom: auto !important;
 }
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 710d95cd..ef1334bd 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -262,7 +262,7 @@ class Popup {
         const scale = this._contentScale;
         const scaleRatio = this._containerSizeContentScale === null ? 1.0 : scale / this._containerSizeContentScale;
         this._containerSizeContentScale = scale;
-        const [x, y, width, height, below] = getPosition(
+        let [x, y, width, height, below] = getPosition(
             elementRect,
             Math.max(containerRect.width * scaleRatio, optionsGeneral.popupWidth * scale),
             Math.max(containerRect.height * scaleRatio, optionsGeneral.popupHeight * scale),
@@ -272,8 +272,16 @@ class Popup {
             writingMode
         );
 
-        container.classList.toggle('yomichan-float-full-width', optionsGeneral.popupDisplayMode === 'full-width');
+        const fullWidth = (optionsGeneral.popupDisplayMode === 'full-width');
+        container.classList.toggle('yomichan-float-full-width', fullWidth);
         container.classList.toggle('yomichan-float-above', !below);
+
+        if (optionsGeneral.popupDisplayMode === 'full-width') {
+            x = viewport.left;
+            y = below ? viewport.bottom - height : viewport.top;
+            width = viewport.right - viewport.left;
+        }
+
         container.style.left = `${x}px`;
         container.style.top = `${y}px`;
         container.style.width = `${width}px`;