MC-3508: Variable value on storefront is not wrapped in side Column container

- fix wrap on non-active Tabs
- add wrap for HTML

Author: anthoula

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

@@ -27,7 +27,8 @@
             height: 60px;
             overflow: hidden;
             position: relative;
-            white-space: pre;
+            word-wrap: break-word;
+
             &:before {
                 background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, @color-gray98 100%);
                 bottom: 0;

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

@@ -13,6 +13,7 @@
 @import 'column/_import.less';
 @import 'column-group/_import.less';
 @import 'heading/_import.less';
+@import 'html/_import.less';
 @import 'image/_import.less';
 @import 'map/_import.less';
 @import 'products/_import.less';

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

@@ -0,0 +1,12 @@
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+//
+//  Default appearance styles
+//  _____________________________________________
+
+[data-role='html'] {
+    word-wrap: break-word;
+}

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/html/_import.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';

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

@@ -50,6 +50,7 @@ div[data-role='tabs'] {
                 transition: all .3s;
                 vertical-align: middle;
                 white-space: normal;
+                word-break: break-all;
 
                 span.tab-title {
                     display: block;
@@ -71,7 +72,6 @@ div[data-role='tabs'] {
                 a.tab-title {
                     position: relative;
                     transition: all .3s;
-                    word-break: break-all;
                 }
             }
         }