MC-855: Pagebuilder - Tab Minimum Height Displays Differently On Stage & Storefront

Author: omiroshnichenko

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

@@ -54,18 +54,22 @@
 
         &.empty-placeholder {
             -moz-transition: .3s;
-            -webkit-transition: .3s;
-            background: url('@{baseDir}Magento_PageBuilder/css/images/cms-empty-row.svg') no-repeat center center;
-            background-size: 505px 97px;
-            height: 170px;
             left: 0;
-            padding-top: 130px;
-            position: absolute;
             text-align: center;
             transition: .3s;
             width: 100%;
             z-index: 1;
         }
+
+        &.empty-placeholder-background {
+            background: url('@{baseDir}Magento_PageBuilder/css/images/cms-empty-row.svg') no-repeat center center;
+            background-size: 505px 97px;
+            box-sizing: border-box;
+            height: 170px;
+            -webkit-transition: .3s;
+            padding-top: 130px;
+            position: absolute;
+        }
     }
 
     .element-children {

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

@@ -9,5 +9,7 @@
     <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 class="pagebuilder-empty-container empty-placeholder"
+         css="getPlaceholderStyles()"
+         translate="'Drag content types or columns here'"/>
 </div>

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

@@ -7,5 +7,7 @@
 
 <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="pagebuilder-empty-container empty-placeholder" css="{visible: parent.children().length == 0}" translate="'Drag content types or columns here'"></div>
+    <div class="pagebuilder-empty-container empty-placeholder"
+         css="getPlaceholderStyles()"
+         translate="'Drag content types or columns here'"/>
 </div>

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

@@ -561,4 +561,22 @@ export default class Preview {
         this.afterObservablesUpdated();
         events.trigger("previewData:updateAfter", {preview: this});
     }
+
+    /**
+     * Show/hide empty placeholder
+     * @returns {object}
+     */
+    public getPlaceholderStyles(): object {
+        let style = this.data.main.style(),
+            minHeight = parseFloat(style.minHeight) || 300,
+            paddingBottom = parseFloat(style.paddingBottom) || 0,
+            paddingTop = parseFloat(style.paddingBottom) || 0,
+            isBackgroundVisible = paddingBottom + paddingTop + minHeight > 130,
+            isVisible = this.parent.children().length == 0;
+
+        return {
+            visible: isVisible,
+            'empty-placeholder-background': isBackgroundVisible
+        }
+    }
 }

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

@@ -83,7 +83,7 @@ div[data-role='tabs'] {
         z-index: 9;
 
         [data-role='tab-item'] {
-            box-sizing: border-box;
+            box-sizing: content-box;
             min-height: inherit;
 
             &:not(:first-child) {