PB-108 make multiple public lines appear properly on front-end

Author: paras89

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/column_group.xml

@@ -62,7 +62,6 @@
                     </css>
                     </element>
                     <element name="container">
-                        <static_style source="display" value="flex"/>
                     </element>
                 </elements>
                 <converters>

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

@@ -0,0 +1,25 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Default appearance styles
+//  _____________________________________________
+
+.pagebuilder-column-line {
+    width:100%;
+    position:relative;
+
+    .bottom-drop-placeholder, .column-drop-placeholder {
+        background: rgba(142, 0, 6, 0.3);
+        height:30px;
+        display:none;
+        z-index:26;
+    }
+
+    .element-children {
+        display:flex;
+        width:100%
+    }
+}

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-line/_import.less

@@ -7,4 +7,5 @@
 //  _import imports all appearance less files
 //  _____________________________________________
 
+@import './_default.less';
 @import './_mobile.less';

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

@@ -4,17 +4,22 @@
  * See COPYING.txt for license details.
  */
 -->
-<!-- @todo move styles to style sheet -->
-<div class="pagebuilder-column-line" style="width:100%; position:relative;">
-    <div class="column-drop-placeholder" afterRender="function (element) { bindColumnLineDropPlaceholder.call($data, element); }"
-         style="background: rgba(142, 0, 6, 0.3); height:30px; top:45px; display:none; z-index:26;" ></div>
+
+<div class="pagebuilder-column-line">
+    <div class="column-drop-placeholder"
+         afterRender="function (element) { bindColumnLineDropPlaceholder.call($data, element); }">
+
+    </div>
     <div class="resize-ghost" afterRender="function (element) { bindGhost.call($data, element); }"></div>
     <div class="drop-placeholder" afterRender="function (element) { bindDropPlaceholder.call($data, element); }"></div>
     <div class="move-placeholder" afterRender="function (element) { bindMovePlaceholder.call($data, element); }"></div>
-    <div class="element-children" style="display:flex; width:100%"
+    <div class="element-children"
          each="$parent.getChildren()"
          afterRender="function (element) { bindInteractions.call($data, element); }">
         <render args="{name: preview.template, data: preview}"></render>
     </div>
-    <div class="bottom-drop-placeholder" afterRender="function (element) { bindColumnLineBottomDropPlaceholder.call($data, element); }" style="background: rgba(142, 0, 6, 0.3); height:30px; display:none; z-index:26;" ></div>
+    <div class="bottom-drop-placeholder"
+         afterRender="function (element) { bindColumnLineBottomDropPlaceholder.call($data, element); }" >
+
+    </div>
 </div>

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/column-group/_default.less

@@ -3,11 +3,7 @@
 //  * See COPYING.txt for license details.
 //  */
 
-& when (@media-common = true) {
-    .pagebuilder-column-group {
-        display: flex;
-    }
-}
+
 
 //
 //  Mobile (style-m.css)