[FIX] web_editor: restore overlay top options on top of the page

When the overlay covers a snippet, if that snippet is at the top of
the page, the options at the top of the overlay are hidden. A system
was made to make them change position in that case but this was broken
by [1], leaving the toggling of a class for that case but without its
related scss.

This commit restores that scss and also improves the detection of that
problematic case.

[1]: https://github.com/odoo/odoo/commit/4f27e52cabb77b8b1a9637a11185ddf882adc9af

closes odoo/odoo#60464

X-original-commit: 97f11571f9e3deacc9b9e1dc0d2cc8fc6b93f15c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 10 insertions, 2 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 ed38b832a6e..0234c0bc011 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -221,7 +221,9 @@ var SnippetEditor = Widget.extend({
             top: offset.top,
         });
         this.$('.o_handles').css('height', $target.outerHeight());
-        this.$el.toggleClass('o_top_cover', offset.top < this.$editable.offset().top);
+
+        const editableOffsetTop = this.$editable.offset().top - manipulatorOffset.top;
+        this.$el.toggleClass('o_top_cover', offset.top - editableOffsetTop < 25);
     },
     /**
      * DOMElements have a default name which appears in the overlay when they
@@ -809,7 +811,7 @@ var SnippetEditor = Widget.extend({
     /**
      * Called when the 'mouse wheel' is used when hovering over the overlay.
      * Disable the pointer events to prevent page scrolling from stopping.
-     * 
+     *
      * @private
      * @param {Event} ev
      */
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index b5b24627ad3..e3116ceddf8 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1709,6 +1709,12 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        &.o_top_cover > .o_handles > .o_overlay_options_wrap {
+            top: auto;
+            bottom: -$o-we-handles-offset-to-hide;
+            transform: translate(-50%, 110%);
+        }
+
         &.o_we_overlay_preview {
             pointer-events: none;