PB-108 styling fixes for column line -test stabilisation

Author: paras89

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-group/grid-size.js

@@ -77,22 +77,32 @@ function validateNewGridSize(columnGroup: ContentTypeCollectionInterface<ColumnG
     }
 
     // Validate that the operation will be successful
-    const numCols = columnGroup.getChildren()().length;
-    const currentGridSize = columnGroup.preview.getResizeUtils().getInitialGridSize();
-    if (newGridSize < currentGridSize && numCols > newGridSize) {
-        let numEmptyColumns = 0;
-        columnGroup.getChildren()().forEach(
-            (column: ContentTypeCollectionInterface<ColumnPreview>) => {
-                if (column.getChildren()().length === 0) {
-                    numEmptyColumns++;
+
+
+    columnGroup.getChildren()().forEach(
+        (columnLine: ContentTypeCollectionInterface<ColumnLinePreview>, index: number) => {
+            let numEmptyColumns = 0;
+            const numCols = columnLine.getChildren()().length;
+            const currentGridSize = columnLine.preview.getResizeUtils().getInitialGridSize();
+            if (newGridSize < currentGridSize && numCols > newGridSize) {
+                columnLine.getChildren()().forEach(
+                    (column: ContentTypeCollectionInterface<ColumnPreview>) => {
+                    if (column.getChildren()().length === 0) {
+                        numEmptyColumns++;
+                    }
+                });
+                if (newGridSize < numCols - numEmptyColumns) {
+                    throw new GridSizeError(
+                        $t("Grid size cannot be smaller than the current total amount of columns, minus any empty columns."),
+                    );
                 }
-            });
-        if (newGridSize < numCols - numEmptyColumns) {
-            throw new GridSizeError(
-                $t("Grid size cannot be smaller than the current total amount of columns, minus any empty columns."),
-            );
-        }
-    }
+            }
+        });
+
+    columnGroup.getChildren()().forEach(
+        (column: ContentTypeCollectionInterface<ColumnPreview>, index: number) => {
+            updateColumnWidth(column, columnWidths[index]);
+        });
 }
 
 /**

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column-group/grid-size.ts

@@ -13,6 +13,7 @@
 @import 'button-item/_import.less';
 @import 'column/_import.less';
 @import 'column-group/_import.less';
+@import 'column-line/_import.less';
 @import 'heading/_import.less';
 @import 'html/_import.less';
 @import 'image/_import.less';

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/_import.less

@@ -0,0 +1,13 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+//
+//  Mobile (style-m.css)
+//  _____________________________________________
+
+.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
+    .pagebuilder-column-line {
+        flex-wrap: wrap;
+    }
+}

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

@@ -0,0 +1,10 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  _import imports all appearance less files
+//  _____________________________________________
+
+@import './_default.less';