[FIX] web_editor: properly cover modal snippets

When a snippet contains a modal, the editor overlay should not cover the
0-height wrapping div but the modal element itself.

Part of https://github.com/odoo/odoo/pull/52663

X-original-commit: bc055e7822b9b2e7f8f9608e335456a71d7896a1

1 files changed, 5 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 1376e6f76e7..eda2b4b3fc3 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -198,16 +198,18 @@ var SnippetEditor = Widget.extend({
         if (!this.isShown() || !this.$target.length || !this.$target.is(':visible')) {
             return;
         }
-        var offset = this.$target.offset();
+        const $modal = this.$target.find('.modal');
+        const $target = $modal.length ? $modal : this.$target;
+        const offset = $target.offset();
         var manipulatorOffset = this.$el.parent().offset();
         offset.top -= manipulatorOffset.top;
         offset.left -= manipulatorOffset.left;
         this.$el.css({
-            width: this.$target.outerWidth(),
+            width: $target.outerWidth(),
             left: offset.left,
             top: offset.top,
         });
-        this.$('.o_handles').css('height', this.$target.outerHeight());
+        this.$('.o_handles').css('height', $target.outerHeight());
         this.$el.toggleClass('o_top_cover', offset.top < this.$editable.offset().top);
     },
     /**