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`;