From f88520280a5a6c5d9ca60787e7dbdbbffda38eaf Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Wed, 18 Sep 2019 12:09:30 +0000
Subject: [PATCH] [FIX] web_editor: make toolbar scrollable in mass_mailing on
 mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, the web_editor toolbar wasn't horizontally scrollable
and part ot the items were not displayed.

To fix this, we have to revert back the initial position on some elements.

closes odoo/odoo#37076

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
---
 .../web_editor/static/src/scss/wysiwyg.scss   | 19 +++++++++++++++++++
 .../static/src/scss/wysiwyg_snippets.scss     | 17 +++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 522d61082b2..0b086a10f6c 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -416,3 +416,22 @@ img.o_we_selected_image {
 img.o_we_custom_image.mx-auto {
     display: block;
 }
+
+@include media-breakpoint-down(md) {
+    #web_editor-top-edit {
+        position: initial !important;
+        height: initial !important;
+        top: initial !important;
+        left: initial !important;
+
+        #web_editor-toolbars .popover-body {
+            display: flex;
+            width: 100%;
+            overflow-x: auto;
+
+            .btn-group {
+                position: static;
+            }
+        }
+    }
+}
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index d3f10ebd526..e7ceae4284f 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -18,6 +18,23 @@ body.editor_enable.editor_has_snippets {
     }
 }
 
+// Mobile fix for mass mailing
+@include media-breakpoint-down(md) {
+    body.editor_enable.editor_has_snippets {
+        padding-left: inherit !important;
+
+        #web_editor-top-edit {
+            position: initial !important;
+            height: initial !important;
+            top: initial !important;
+            left: initial !important;
+
+            .note-popover .popover {
+                left: 0 !important;
+            }
+        }
+    }
+}
 // SNIPPET PANEL
 #oe_snippets {
     @include o-w-preserve-btn;