From 65d08097860a836eeb4d69c8174bd037dee0a593 Mon Sep 17 00:00:00 2001
From: Gorash <chm@odoo.com>
Date: Wed, 18 Sep 2019 10:17:46 +0000
Subject: [PATCH] [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.
---
 .../web_editor/static/src/scss/wysiwyg.scss   | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 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 {
-    padding-top: var(--o-we-toolbar-height) !important;
+.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 {