[FIX] web_editor: fix shapes snippet option

- Exclude '.o_we_pager_header' from click behaviour so clicking on the
  shape dropdown does not close it if an user misclicks next to a pager
  button.

- Add borders on navigation buttons in shapes option to improve
  visibility.

- Cut the last visible option in the shapes list, this way the user
  will understand that he can scroll.

Part of https://github.com/odoo/odoo/pull/69857
task-2431484

X-original-commit: 0d8e4368775bf7fd1aca1376e57c5847b283bded
Co-authored-by: qsm-odoo <qsm@odoo.com>

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

@@ -1228,7 +1228,7 @@ var SnippetsMenu = Widget.extend({
                 lastElement = false;
             });
 
-            if (!$target.closest('we-button, we-toggler, .o_we_color_preview').length) {
+            if (!$target.closest('we-button, we-toggler, we-select, .o_we_color_preview').length) {
                 this._closeWidgets();
             }
             if (!$target.closest('body > *').length) {

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

@@ -981,6 +981,18 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
         }
     },
 
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _shouldIgnoreClick(ev) {
+        return !!ev.target.closest('[role="button"]');
+    },
+
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
@@ -991,7 +1003,7 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
      * @private
      */
     _onClick: function (ev) {
-        if (ev.target.closest('[role="button"]')) {
+        if (this._shouldIgnoreClick(ev)) {
             return;
         }
 
@@ -1435,6 +1447,12 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         }
         return this.colorPalette.appendTo(document.createDocumentFragment());
     },
+    /**
+     * @override
+     */
+    _shouldIgnoreClick(ev) {
+        return ev.originalEvent.__isColorpickerClick || this._super(...arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -1488,17 +1506,6 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     _onEnterKey: function () {
         this.close();
     },
-    /**
-     * @override
-     */
-    _onClick: function (ev) {
-        // Do not close the colorpalette on colorpicker click
-        if (ev.originalEvent.__isColorpickerClick) {
-            ev.stopPropagation();
-            return;
-        }
-        return this._super(...arguments);
-    },
 });
 
 const MediapickerUserValueWidget = UserValueWidget.extend({
@@ -2227,6 +2234,12 @@ const SelectPagerUserValueWidget = SelectUserValueWidget.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    _shouldIgnoreClick(ev) {
+        return !!ev.target.closest('.o_we_pager_header') || this._super(...arguments);
+    },
     /**
      * Updates the pager's page number display.
      *

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -1002,13 +1002,17 @@ body.editor_enable.editor_has_snippets {
                 }
             }
             .o_we_pager_next, .o_we_pager_prev {
+                margin: 0.3em;
                 padding: $o-we-sidebar-content-field-label-spacing;
                 cursor: pointer;
+                border: $o-we-item-border-width solid currentColor;
+                border-radius: $o-we-item-border-radius;
             }
             we-select-page {
                 display: none;
                 width: 100%;
-                max-height: 600px;
+                // Cut the last visible option in the list to understand that we can scroll.
+                max-height: 75px * 7.5;
                 overflow-y: auto;
 
                 &.active {