UX: Remove extra space added by img resize controls in composer preview

app/assets/javascripts/pretty-text/addon/engines/discourse-markdown/resize-controls.js

@@ -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>";
 

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 {