MC-4126: Duplicate row border after switching Row appearance

- Fix slide margin / padding issues

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/observable-updater.js

@@ -9,7 +9,7 @@
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.styleNoReset(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor">
         <scope args="getUploader().getUiComponent()">
             <render />

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html

@@ -9,7 +9,7 @@
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.styleNoReset(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
          css="data.main.css"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor">
         <scope args="getUploader().getUiComponent()">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html

@@ -9,7 +9,7 @@
      attr="data.main.attributes"
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
-    <div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
+    <div ko-style="Object.assign(data.main.style(), data.desktop_image.styleNoReset(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor">
         <scope args="getUploader().getUiComponent()">
             <render />

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html

@@ -10,7 +10,7 @@
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="Object.assign(data.desktop_image.style(), data.main.style())"
+         ko-style="Object.assign(data.main.style(), data.desktop_image.styleNoReset())"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-poster-overlay"
              attr="data.overlay.attributes"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html

@@ -57,6 +57,7 @@ export default class ObservableUpdater {
                 viewModel.data[elementName] = {
                     attributes: ko.observable({}),
                     style: ko.observable({}),
+                    styleNoReset: ko.observable({}),
                     css: ko.observable({}),
                     html: ko.observable({}),
                 };
@@ -65,6 +66,12 @@ export default class ObservableUpdater {
             if (config[elementName].style !== undefined) {
                 const currentStyles = viewModel.data[elementName].style();
                 let newStyles = this.convertStyle(config[elementName], data);
+                /**
+                 * There maybe instances when you need to interface with the styles without the reset applied, this is
+                 * currently used when merging multiple elements styles together, as the reset can cause undesired
+                 * effects if all elements attempt to apply.
+                 */
+                viewModel.data[elementName].styleNoReset(newStyles);
 
                 if (currentStyles) {
                     /**