[FIX] website, *: review modal behaviors with right-panelization

*: web, web_editor

Since the right-panelization made with [1], the modals were not
compensating the body scrollbar when opened anymore and the backdrop
was misplaced. This commit fixes the problems generically, to support
modals with non-body scrolling.

[1]: https://github.com/odoo/odoo/pull/57975

closes odoo/odoo#58414

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

7 files changed, 53 insertions, 8 deletions

diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index f4aba50be8a..e0b0f67ef6d 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -148,6 +148,13 @@ var dom = {
         return $(el).closestScrollable()[0];
     },
     /**
+     * @param {HTMLElement} el
+     * @see $.compensateScrollbar
+     */
+    compensateScrollbar(el, ...rest) {
+        $(el).compensateScrollbar(...rest);
+    },
+    /**
      * jQuery find function behavior is::
      *
      *      $('A').find('A B') <=> $('A A B')
diff --git a/addons/web/static/src/js/libs/bootstrap.js b/addons/web/static/src/js/libs/bootstrap.js
index 07e04c64a39..3e2962cc490 100644
--- a/addons/web/static/src/js/libs/bootstrap.js
+++ b/addons/web/static/src/js/libs/bootstrap.js
@@ -96,6 +96,24 @@ $.fn.scrollspy.Constructor.prototype.refresh = function () {
     }
 };
 
+/* Bootstrap modal scrollbar compensation on non-body */
+const bsSetScrollbarFunction = $.fn.modal.Constructor.prototype._setScrollbar;
+$.fn.modal.Constructor.prototype._setScrollbar = function () {
+    const $scrollable = $().getScrollingElement();
+    if (document.body.contains($scrollable[0])) {
+        $scrollable.compensateScrollbar(true);
+    }
+    return bsSetScrollbarFunction.apply(this, arguments);
+};
+const bsResetScrollbarFunction = $.fn.modal.Constructor.prototype._resetScrollbar;
+$.fn.modal.Constructor.prototype._resetScrollbar = function () {
+    const $scrollable = $().getScrollingElement();
+    if (document.body.contains($scrollable[0])) {
+        $scrollable.compensateScrollbar(false);
+    }
+    return bsResetScrollbarFunction.apply(this, arguments);
+};
+
 return {
     makeExtendedSanitizeWhiteList: makeExtendedSanitizeWhiteList,
 };
diff --git a/addons/web/static/src/js/libs/jquery.js b/addons/web/static/src/js/libs/jquery.js
index 6921b004019..7c3273abc91 100644
--- a/addons/web/static/src/js/libs/jquery.js
+++ b/addons/web/static/src/js/libs/jquery.js
@@ -136,6 +136,28 @@ $.fn.extend({
         return $el;
     },
     /**
+     * Adapt the given css property by adding the size of a scrollbar if any.
+     * Limitation: only works if the given css property is not already used as
+     * inline style for another reason.
+     *
+     * @param {boolean} [add=true]
+     * @param {boolean} [isScrollElement=true]
+     * @param {string} [cssProperty='padding-right']
+     */
+    compensateScrollbar(add = true, isScrollElement = true, cssProperty = 'padding-right') {
+        for (const el of this) {
+            // Compensate scrollbar
+            el.style.removeProperty(cssProperty);
+            if (!add) {
+                return;
+            }
+            const scrollableEl = isScrollElement ? el : $(el).parent().closestScrollable()[0];
+            const style = window.getComputedStyle(el);
+            const newValue = parseInt(style[cssProperty]) + scrollableEl.offsetWidth - scrollableEl.clientWidth;
+            el.style.setProperty(cssProperty, `${newValue}px`, 'important');
+        }
+    },
+    /**
      * @returns {jQuery}
      */
     getScrollingElement() {
diff --git a/addons/web/static/src/scss/base_frontend.scss b/addons/web/static/src/scss/base_frontend.scss
index 585ce965ec5..c300b3db38e 100644
--- a/addons/web/static/src/scss/base_frontend.scss
+++ b/addons/web/static/src/scss/base_frontend.scss
@@ -24,3 +24,6 @@ html, body, #wrapwrap {
         flex: 1 0 auto;
     }
 }
+.modal-open #wrapwrap {
+    overflow: hidden;
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 433d002bc7e..37ad3403a07 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -11,6 +11,7 @@ body.editor_enable.editor_has_snippets {
     }
 
     .modal:not(.o_technical_modal) {
+        top: 0 !important;
         // set z-index so customize options visible on dialog.
         z-index: $o-we-overlay-zindex - 1;
         // just for fake backdrop effect
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 70ed4565185..b1da4caf809 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -73,13 +73,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
      * @private
      */
     _adaptFixedHeaderPosition() {
-        // Compensate scrollbar
-        this.el.style.removeProperty('right');
-        if (this.fixedHeader) {
-            const scrollableEl = this.$el.parent().closestScrollable()[0];
-            const style = window.getComputedStyle(this.el);
-            this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important');
-        }
+        dom.compensateScrollbar(this.el, this.fixedHeader, false, 'right');
     },
     /**
      * @private
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 72c3a5f6538..f43fbef9548 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -159,8 +159,8 @@ body.editor_enable.editor_has_snippets {
 
     .s_popup .modal {
         // s_popup in edit mode
-        top: var(--o-we-toolbar-height);
         background-color: transparent;
+
         &.fade .modal-dialog {
             transform: none;
         }