diff --git a/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown/resize-controls.js b/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown/resize-controls.js
index 16e5a17aabe..8ccd784ce59 100644
--- a/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown/resize-controls.js
+++ b/app/assets/javascripts/pretty-text/addon/engines/discourse-markdown/resize-controls.js
@@ -54,7 +54,7 @@ function rule(state) {
 }
 
 function buildScaleButton(selectedScale, scale) {
-  const activeScaleClass = selectedScale === scale ? "active" : "";
+  const activeScaleClass = selectedScale === scale ? " active" : "";
   return (
     "<span class='scale-btn" +
     activeScaleClass +
@@ -99,7 +99,7 @@ export function setup(helper) {
 
           result += SCALES.map(scale =>
             buildScaleButton(selectedScale, scale)
-          ).join("<span class='separator'>&nbsp;•&nbsp;</span>");
+          ).join("");
 
           result += "</span></span>";
 
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 401a4cc4f60..6183aa0b14a 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -194,9 +194,11 @@
 }
 
 .d-editor-preview .image-wrapper {
+  --resizer-height: 1.75em;
   position: relative;
   display: inline-block;
-  padding-bottom: 1.4em;
+  padding-bottom: var(--resizer-height);
+  margin-bottom: calc(var(--resizer-height) * -1);
 
   img {
     padding-bottom: 0;
@@ -204,26 +206,29 @@
 
   &:hover {
     .button-wrapper {
-      opacity: 0.9;
+      opacity: 1;
     }
   }
   .button-wrapper {
-    opacity: 0;
     position: absolute;
-    transition: all 0.25s;
-    display: flex;
-    align-items: center;
+    height: var(--resizer-height);
     bottom: 0;
     left: 0;
-    .separator {
-      color: $primary-low-mid;
-    }
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    transition: all 0.25s;
+    z-index: 1; // needs to be higher than image
+    width: 100%;
+    background: $secondary; // for when images are wider than controls
 
     .scale-btn {
+      background: $secondary; // for when controls are wider than image
       color: $tertiary;
-      padding: 0 0.4em;
-      &:first-of-type {
-        padding-left: 0;
+      padding: 0 1em;
+      &:first-child,
+      &:last-child {
+        padding: 0;
       }
 
       &.active {