diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
index cc2ae43b7e9..066439d3ba9 100644
--- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
+++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss
@@ -344,19 +344,27 @@ body.editor_enable.o_basic_theme.o_in_iframe {
             display: block;
         }
     }
-}
+    #oe_snippets.o_loaded {
+        transform: translateX(0);
 
-.o_mass_mailing_iframe #oe_snippets.o_loaded {
-    transition: none;
-    transform: translateX(0);
+        > .o_we_customize_panel .oe-toolbar {
+            #style.dropup, #font-size.dropup {
+                > .dropdown-menu {
+                    overflow-y: scroll;
+                    max-height: 200px;
+                }
+            }
 
-    > .o_we_customize_panel .oe-toolbar {
-        #style.dropup, #font-size.dropup {
-            > .dropdown-menu {
-                overflow-y: scroll;
-                max-height: 200px;
+            // Popper.js manipulates transform and position of the dropdown. In
+            // mass_mailing, its calculations are wrong. These !important rules
+            // removes the wrong values automatically generated by Popper.
+            #justify , #style.dropup, #font-size.dropup {
+                > .dropdown-menu {
+                    transform: unset !important;
+                    bottom: 100% !important;
+                    top: unset !important;
+                }
             }
         }
     }
 }
-