[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>

1 files changed, 22 insertions, 0 deletions

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() {