MC-5383: Option Menus, Heading Inline Editor & tinyMCE Inline Editor Are Cut Off on Full Screen View

- Implemented fix to tinymce4 toolbar animation
- Implemented tooltip in column toolbar overflow styling and logic
- Implemented live edit toolbar overflow styling and logic
- Implemented options men u overflow right side styling and logic

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_inline-wysiwyg.less

@@ -21,7 +21,7 @@
         pointer-events: none;
         position: absolute;
         transform: translateY(0);
-        transition: transform 100ms, opacity 400ms, visibility 400ms;
+        transition: transform 200ms, opacity 200ms, visibility 200ms;
         visibility: hidden;
         width: auto !important;
 
@@ -42,9 +42,6 @@
             opacity: 1;
             pointer-events: all;
             visibility: visible !important;
-            &.transform-up {
-                transform: translateY(-100%);
-            }
         }
     }
     &._right-aligned-toolbar ~ div.mce-tinymce-inline {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -75,7 +75,7 @@
         }
 
         .pagebuilder-canvas {
-            padding-top: 50px;
+            padding-top: 30px;
         }
 
         .pagebuilder-panel-wrapper {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_toolbar.less

@@ -18,7 +18,6 @@
     }
 
     .pagebuilder-toolbar-options {
-        bottom: 100%;
         opacity: 1;
         transition-delay: 200ms;
         visibility: visible;
@@ -30,16 +29,15 @@
 }
 
 .pagebuilder-toolbar-options {
-    -moz-transition: opacity 200ms, top 200ms, visibility 200ms;
-    -o-transition: opacity 200ms, top 200ms, visibility 200ms;
-    -webkit-transition: opacity 200ms, top 200ms, visibility 200ms;
+    -moz-transition: transform 200ms, opacity 200ms, visibility 200ms;
+    -o-transition: transform 200ms, opacity 200ms, visibility 200ms;
+    -webkit-transition: transform 200ms, opacity 200ms, visibility 200ms;
     background-color: @color-gray94;
     border: 1px solid @color-gray75;
-    bottom: 0;
     left: -2px;
     opacity: 0;
     position: absolute;
-    transition: bottom 200ms, opacity 200ms, visibility 200ms;
+    transition: transform 200ms, opacity 200ms, visibility 200ms;
     visibility: hidden;
     width: calc(~'100% + 4px');
     z-index: 32;
@@ -58,7 +56,6 @@
             &:not(:first-child):before {
                 background-color: @color-light-gray;
                 content: '';
-                height: 80%;
                 left: 0;
                 position: relative;
                 top: 10%;

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

@@ -324,24 +324,33 @@
 }
 
 .pagebuilder-options {
-    -moz-transition: opacity 200ms, visibility 200ms;
-    -o-transition: opacity 200ms, visibility 200ms;
-    -webkit-transition: opacity 200ms, visibility 200ms;
     height: 40px;
-    left: 50%;
     opacity: 0;
     position: absolute;
+    right: 0;
     text-align: center;
     top: 0;
-    transform: translate(-50%, -50%);
+    transform: translate(0, -50%);
+    -moz-transition: opacity 200ms, visibility 200ms;
+    -o-transition: opacity 200ms, visibility 200ms;
+    -webkit-transition: opacity 200ms, visibility 200ms;
     transition: opacity 200ms, visibility 200ms;
     visibility: hidden;
     z-index: 105;
 
+    &.pagebuilder-options-middle {
+        right: 50%;
+        transform: translate(50%, -50%);
+    }
+
     &.pagebuilder-options-visible {
-        .pagebuilder-options-visible;
+        opacity: 1;
+        transition-delay: 200ms;
+        visibility: visible;
     }
 
+
+
     .pagebuilder-options-wrapper {
         background: @color-white;
         border: 1px solid rgba(153, 153, 153, .7);

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

@@ -291,7 +291,7 @@
         bottom: 175%;
         box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
         font-size: 14px;
-        left: -390%;
+        left: -200%;
         padding: .9rem 1.8rem;
         position: absolute;
         text-align: left;
@@ -305,7 +305,7 @@
             content: '';
             display: block;
             height: 0;
-            left: 87.5%;
+            left: 70.5%;
             margin-left: -.8rem;
             position: absolute;
             top: 100%;
@@ -320,6 +320,26 @@
             border-top-color: @color-lazy-sun;
             z-index: 4;
         }
+
+        &.tooltip-down {
+            bottom: -490%;
+
+            &:before,
+            &:after {
+                top: -25%;
+            }
+            &:before {
+                border-bottom-color: @color-lazy-sun;
+                border-top-color: transparent;
+                margin-top: 1px;
+                z-index: 4;
+            }
+            &:after {
+                border-bottom-color: @color-dark-grayish-orange;
+                border-top-color: transparent;
+                z-index: 3;
+            }
+        }
     }
 
     .grid-panel-tooltip:hover > .tooltip-content {