[FIX] web_editor: fix colorpicker display on html fields

ISSUE
When selecting colors options from the editor toolbar on a html field,
the colorpicker was not displayed under the toolbar.

CAUSE
Before this commit, the colorpicker dropdown position was computed with
top, bottom and height css properties.

After a new colorpicker was introduced with multiple sections of
different sizes, the size of the dropdown-menu could not be fixed
anymore and [1] broke the existing computation to display the dropdown
above or below the toolbar.

SOLUTION
Using bootstrap dropdown 'dropup' class instead of top, bottom and
height css properties.

[1]: https://github.com/odoo/odoo/commit/96ab729850983162a0039e40c77537ef65cd039e

closes odoo/odoo#73947

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -842,19 +842,12 @@ const Wysiwyg = Widget.extend({
                         }
                         manualOpening = true;
                         $dropdown.children('.dropdown-toggle').dropdown('show');
-                        const $colorpickerMenu = $dropdown.find('.colorpicker-menu');
                         const $colorpicker = $dropdown.find('.colorpicker');
                         const colorpickerHeight = $colorpicker.outerHeight();
                         const toolbarPos = this.toolbar.$el.offset();
-                        let top;
-                        if (colorpickerHeight < toolbarPos.top) {
-                            top = 'auto';
-                        } else {
-                            const colorpickerBottom = toolbarPos.top + this.toolbar.$el.outerHeight() + colorpickerHeight;
-                            const clientHeight = this.odooEditor.document.documentElement.clientHeight;
-                            top = colorpickerBottom > clientHeight ? colorpickerHeight - clientHeight : '';
-                        }
-                        $colorpickerMenu.css({top, height: $colorpicker.outerHeight() + 2});
+                        const colorpickerBottom = toolbarPos.top + this.toolbar.$el.outerHeight() + colorpickerHeight;
+                        const clientHeight = this.odooEditor.document.documentElement.clientHeight;
+                        $dropdown[0].classList.toggle('dropup', colorpickerBottom > clientHeight);
                         manualOpening = false;
                     });
                 });

addons/web_editor/static/src/scss/wysiwyg.scss

@@ -75,11 +75,9 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         box-shadow: $o-we-dropdown-shadow;
 
         &.colorpicker-menu {
-            bottom: 100%;
             margin-top: 0;
             margin-bottom: 0.125rem;
             min-width: 222px !important;
-            height: auto !important;
         }
     }
     .dropdown-toggle::after {