MC-2363: Add vertical alignment and min height to row configuration

- fix issue with tab contents rendering when not using render template

Author: anthoula

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="element-children content-type-container" each="parent.getChildren()" css="getChildrenCss()" attr="{id: parent.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
+<div class="element-children content-type-container" each="parent.getChildren()" ko-style="data.hasOwnProperty('container') ? data.container.style : {}" css="getChildrenCss()" attr="{id: parent.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
     <if args="$parent.isContainer()">
         <div class="pagebuilder-drop-indicator"></div>
     </if>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/default/preview.html

@@ -6,16 +6,8 @@
 -->
 
 <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height" data-bind="attr: data.main.attributes, style: data.main.style, css: Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1}), event: {mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false, afterRender: function (element) { setTimeout(function () { initParallax.call($data, element); }, 0) }">
-    <render args="getOptions().template"></render>
-    <div class="element-children content-type-container" each="parent.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: parent.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
-        <if args="$parent.isContainer()">
-            <div class="pagebuilder-drop-indicator"></div>
-        </if>
-        <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }"></div>
-        <if args="$parent.isContainer() && $index() === $parent.parent.getChildren()().length - 1">
-            <div class="pagebuilder-drop-indicator"></div>
-        </if>
-    </div>
+    <render args="getOptions().template"/>
+    <render args="previewChildTemplate"/>
     <div class="pagebuilder-display-label" data-bind="text: function () { return displayLabel().toUpperCase(); }()"></div>
     <div class="pagebuilder-empty-container empty-placeholder" data-bind="css: {visible: parent.children().length == 0}, i18n: 'Drag content types or columns here'"></div>
 </div>