[FIX] web_editor: prevent popovers from overflowing the editable

When setting align right on a picture, the popover of the picture was
partially overflowing the editable zone, rendering it useless.

This commit mimicks the behavior of Odoo 12 by disabling the fact
that the popover follows the picture.

1 files changed, 21 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 2cac2c448aa..5b14e4b415f 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -19,9 +19,25 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
 }
 
 // EDITOR TOP BAR AND POPOVER
-body.editor_enable {
+.note-popover .popover {
+    max-width: 350px;
+    left: 50% !important;
+    transform: translate(-50%, 0);
+    .popover-body {
+        white-space: normal;
+    }
+}
+
+.editor_enable {
     padding-top: var(--o-we-toolbar-height) !important;
+    .note-popover .popover .popover-body {
+        height: var(--o-we-toolbar-height);
+    }
+    .note-popover .popover  {
+        transform: none;
+    }
 }
+
 #web_editor-top-edit {
     @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
@@ -34,6 +50,7 @@ body.editor_enable {
         left: 0 !important;
         right: 0 !important;
         border: none !important;
+        max-width: none;
     }
 }
 
@@ -45,12 +62,10 @@ body.editor_enable {
 }
 .note-popover .popover .popover-body,
 .panel-heading.note-toolbar {
-    height: var(--o-we-toolbar-height);
     padding-bottom: 0;
     border-bottom: $o-we-border-width solid $o-we-border-color;
     background-color: var(--o-we-bg-color);
     font-family: $o-we-font-family;
-    white-space: nowrap;
 
     // Main layout of buttons
     .btn-group, .btn {
@@ -153,6 +168,9 @@ body.editor_enable {
         }
     }
 }
+.panel-heading.note-toolbar {
+    white-space: nowrap;
+}
 
 // ANIMATIONS
 @keyframes fadeInDownSmall {