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

- Updated implementation to work with all responsive cases

Author: nathanjosiah

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

@@ -11,41 +11,6 @@
     border: 1px solid transparent;
     width: 100%;
 
-    .column-width-40 &,
-    .column-width-30 &,
-    .column-width-20 &,
-    .column-width-10 & {
-        .file-uploader-area {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-
-            > span {
-                display: none;
-            }
-        }
-        .image-upload-instructions {
-            margin-bottom: 5px;
-        }
-        .file-uploader-button {
-            display: block;
-            margin-left: 0;
-            margin-right: 0;
-            margin-top: 15px;
-            max-width: 180px;
-            width: 100%;
-        }
-    }
-    .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/css/source/form/element/uploader/preview/_image.less

@@ -67,6 +67,37 @@
         display: none;
     }
 
+    ._compact-ui .file-uploader-area,
+    ._micro-ui .file-uploader-area {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+        > span {
+            display: none;
+        }
+        .image-upload-instructions {
+            margin-bottom: 5px;
+        }
+        .file-uploader-button {
+            display: block;
+            margin-left: 0;
+            margin-right: 0;
+            margin-top: 15px;
+            max-width: 180px;
+            width: 100%;
+        }
+    }
+    ._micro-ui .file-uploader-area {
+        .file-uploader-button {
+            padding: .6rem 0;
+        }
+        .image-upload-requirements {
+            display: none;
+        }
+    }
+
     .pagebuilder-image-uploader-container-dropzone-overlay {
         display: none;
         height: 100%;

app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/image-uploader.js

@@ -8,15 +8,17 @@ define([
     'underscore',
     'uiRegistry',
     'Magento_Ui/js/form/element/image-uploader',
+    'Magento_PageBuilder/js/resource/resize-observer/ResizeObserver.min',
     'Magento_PageBuilder/js/events',
     'mage/translate'
-], function ($, _, uiRegistry, Uploader, events, $t) {
+], function ($, _, uiRegistry, Uploader, ResizeObserver, events, $t) {
     'use strict';
 
     var initializedOnce = false;
 
     return Uploader.extend({
         defaults: {
+            $uploadArea: null,
             isShowImageUploadInstructions: true,
             isShowImageUploadOptions: false,
             classes: {
@@ -59,6 +61,16 @@ define([
             }
         },
 
+        /**
+         * {@inheritDoc}
+         */
+        initUploader: function (fileInput) {
+            this._super(fileInput);
+            this.$uploadArea = this.$fileInput.closest('.pagebuilder-image-empty-preview');
+            new ResizeObserver(this.updateResponsiveClasses.bind(this)).observe(this.$uploadArea);
+            this.$uploadArea = $(this.$uploadArea);
+        },
+
         /**
          * Remove draggable classes from dropzones
          * {@inheritDoc}
@@ -138,6 +150,23 @@ define([
          */
         onAssignedFile: function (file) {
             this.value([file]);
+        },
+
+        /**
+         * Adds the appropriate ui state class to the upload control area based on the current rendered size
+         */
+        updateResponsiveClasses: function () {
+            if (!this.$uploadArea.is(':visible')) {
+                return;
+            }
+
+            this.$uploadArea.removeClass('_micro-ui _compact-ui');
+
+            if (this.$uploadArea.width() < 130) {
+                this.$uploadArea.addClass('_micro-ui');
+            } else if (this.$uploadArea.width() < 440) {
+                this.$uploadArea.addClass('_compact-ui');
+            }
         }
     });
 });