MC-3397: Content Vertical Alignment inside a Container for Tab Item

- update preview and master template with container styles

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/master.html

@@ -5,6 +5,8 @@
  */
 -->
 
-<div attr="Object.assign({}, data.main.attributes(), { id: parent.id })" ko-style="data.main.style" css="data.main.css">
+<div attr="Object.assign({}, data.main.attributes(), { id: parent.id })"
+     ko-style="Object.assign(data.container.style(), data.main.style())"
+     css="data.main.css">
     <render args="renderChildTemplate" />
 </div>

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

@@ -6,6 +6,14 @@
 -->
 
 <div class="pagebuilder-content-type type-container pagebuilder-tab-item" attr="Object.assign({}, {id: parent.id}, data.main.attributes())" ko-style="Object.assign({}, data.main.style(), {borderRadius: data.main.style().borderRadius || $parent.parent.preview.data.headers.style().borderRadius})" css="Object.assign({'empty-container': parent.children().length == 0}, data.main.css())">
-    <render args="previewChildTemplate" />
+    <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>
     <div class="pagebuilder-empty-container empty-placeholder" css="{visible: parent.children().length == 0}" translate="'Drag content types or columns here'"></div>
 </div>