[FIX] web_editor: fix auto scroll when moving inner content

Steps to reproduce:

    - Drop enough snippets to have a scrollbar.
    - Drop a snippet with inner content having up/down arrows (e.g.
      showcase,timeline).
    - Move inner content with the arrows.
    - => The element is correctly placed but the screen scrolled along
      with it.

This commit fixes it by preventing the page from scrolling if the
element being moved is still visible after the move. The page therefore
scrolls only if the moved element is not visible after the move.

This commit also improves page scrolling when the element is hidden at
the bottom. Before, the page scrolled to bring the moved element to the
top of the page but now, it stops scrolling as soon as the element is
fully visible.

task-2952200

closes odoo/odoo#108831

X-original-commit: 675ae44803539a807c79fbc32c93b4e5d230816e
Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -5214,11 +5214,19 @@ registry.SnippetMove = SnippetOptionWidget.extend({
         }
         if (!this.$target.is(this.data.noScroll)
                 && (params.name === 'move_up_opt' || params.name === 'move_down_opt')) {
-            scrollTo(this.$target[0], {
-                extraOffset: 50,
-                easing: 'linear',
-                duration: 550,
-            });
+            const mainScrollingEl = $().getScrollingElement()[0];
+            const elTop = this.$target[0].getBoundingClientRect().top;
+            const heightDiff = mainScrollingEl.offsetHeight - this.$target[0].offsetHeight;
+            const bottomHidden = heightDiff < elTop;
+            const hidden = elTop < 0 || bottomHidden;
+            if (hidden) {
+                scrollTo(this.$target[0], {
+                    extraOffset: 50,
+                    forcedOffset: bottomHidden ? heightDiff - 50 : undefined,
+                    easing: 'linear',
+                    duration: 500,
+                });
+            }
         }
         this.trigger_up('option_update', {
             optionName: 'StepsConnector',