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

- Updated style and logic for preview options menu

Author: Hwashiang Yu

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

@@ -327,20 +327,20 @@
     height: 40px;
     opacity: 0;
     position: absolute;
-    right: 0;
+    right: 50%;
     text-align: center;
     top: 0;
-    transform: translate(0, -50%);
+    transform: translate(50%, -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-right {
+        right: 0;
+        transform: translate(0, -50%);
     }
 
     &.pagebuilder-options-visible {

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

@@ -197,8 +197,10 @@ export default class Preview {
         const middleOfPreview = currentTarget.getBoundingClientRect().left + currentTarget.offsetWidth / 2;
 
         // if there are space for moving options menu to the middle
-        if (window.innerWidth - middleOfPreview > optionsMenu.width() / 2) {
-            optionsMenu.parent().addClass("pagebuilder-options-middle");
+        if (!(window.innerWidth - middleOfPreview > optionsMenu.width() / 2)) {
+            optionsMenu.parent().addClass("pagebuilder-options-right");
+        } else {
+            optionsMenu.parent().removeClass("pagebuilder-options-right");
         }
 
         optionsMenu.parent().addClass("pagebuilder-options-visible");
@@ -229,9 +231,6 @@ export default class Preview {
                 }
 
                 optionsMenu.parent().removeClass("pagebuilder-options-visible");
-                _.delay(() => {
-                    optionsMenu.parent().removeClass("pagebuilder-options-middle");
-                }, 200);
                 $(currentTarget).removeClass("pagebuilder-content-type-active");
             }
         }, 100); // 100 ms delay to allow for users hovering over other elements