MC-1263: Buttons of Image Content Block are not aligned correctly

- Implemented new classes for column widths
- Updated image styles to not break UI on stage

Author: nathanjosiah

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/image/_default.less

@@ -11,6 +11,45 @@
     border: 1px solid transparent;
     width: 100%;
 
+    .column-width-40 &,
+    .column-width-30 &,
+    .column-width-20 &,
+    .column-width-10 & {
+        .file-uploader-area > span {
+            display: none;
+        }
+        .file-uploader-button {
+            margin-left: 0;
+            margin-right: 0;
+
+            ~ .file-uploader-button {
+                margin-left: 15px;
+            }
+        }
+    }
+    .column-width-20 &,
+    .column-width-10 & {
+        .file-uploader-button {
+            width: auto;
+        }
+    }
+    .column-width-30 &,
+    .column-width-20 &,
+    .column-width-10 & {
+        .file-uploader-button ~ .file-uploader-button {
+            margin-left: 0;
+            margin-top: 15px;
+        }
+    }
+    .column-width-10 & {
+        .file-uploader-button {
+            padding: .6rem 0;
+        }
+        .image-upload-requirements {
+            display: none;
+        }
+    }
+
     figure {
         box-sizing: border-box;
         margin: 0;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column/preview.js

@@ -52,6 +52,7 @@ export default class Preview extends PreviewCollection {
         super(parent, config, observableUpdater);
 
         // Update the width label for the column
+        this.parent.dataStore.subscribe(this.updateColumnWidthClass.bind(this), "width");
         this.parent.dataStore.subscribe(this.updateDisplayLabel.bind(this), "width");
         this.parent.parent.dataStore.subscribe(this.updateDisplayLabel.bind(this), "grid_size");
     }
@@ -84,6 +85,7 @@ export default class Preview extends PreviewCollection {
      */
     public initColumn(element: Element) {
         this.element = $(element);
+        this.updateColumnWidthClass();
         events.trigger("column:initializeAfter", {
             column: this.parent,
             element: $(element),
@@ -266,6 +268,26 @@ export default class Preview extends PreviewCollection {
         }
     }
 
+    /**
+     * Syncs the column-width-* class on the children-wrapper with the current width to the nearest tenth rounded up
+     */
+    public updateColumnWidthClass() {
+        // Only update once instantiated
+        if (!this.element) {
+            return;
+        }
+
+        const currentClass = this.element.attr("class").match(/(?:^|\s)(column-width-\d{1,3})(?:$|\s)/);
+
+        if (currentClass !== null) {
+            this.element.removeClass(currentClass[1]);
+        }
+
+        const roundedWidth = Math.ceil(parseFloat(this.parent.dataStore.get("width").toString()) / 10) * 10;
+
+        this.element.addClass("column-width-" + roundedWidth);
+    }
+
     /**
      * Update the style attribute mapper converts images to directives, override it to include the correct URL
      *