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

- Resolved static failures
- Resolved incorrect test reference

Author: Hwashiang Yu

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderPanelTest.xml

@@ -757,7 +757,7 @@
         </actionGroup>
         <executeJS function="return document.evaluate(`{{PageBuilderContentTypeOptionsMenu.contentTypeEditByIndex(PageBuilderHeadingContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().right" stepKey="getHeadingOptionMenuBoundingClientRectRightFullScreen"/>
         <assertLessThanOrEqual stepKey="assertHeadingOptionMenuNotOverflowFullScreen">
-            <expectedResult type="variable">$getWindowWidthFullScreen</expectedResult>
+            <expectedResult type="variable">$getWindowWidth</expectedResult>
             <actualResult type="variable">$getHeadingOptionMenuBoundingClientRectRightFullScreen</actualResult>
         </assertLessThanOrEqual>
         <!-- Assert text options menu did not overflow -->
@@ -768,7 +768,7 @@
         </actionGroup>
         <executeJS function="return document.evaluate(`{{PageBuilderContentTypeOptionsMenu.contentTypeEditByIndex(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().right" stepKey="getTextOptionMenuBoundingClientRectRightFullScreen"/>
         <assertLessThanOrEqual stepKey="assertTextOptionMenuNotOverflowFullScreen">
-            <expectedResult type="variable">$getWindowWidthFullScreen</expectedResult>
+            <expectedResult type="variable">$getWindowWidth</expectedResult>
             <actualResult type="variable">$getTextOptionMenuBoundingClientRectRightFullScreen</actualResult>
         </assertLessThanOrEqual>
     </test>

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

@@ -323,16 +323,16 @@
 }
 
 .pagebuilder-options {
+    -moz-transition: opacity 200ms, visibility 200ms;
+    -o-transition: opacity 200ms, visibility 200ms;
+    -webkit-transition: opacity 200ms, visibility 200ms;
     height: 40px;
     opacity: 0;
     position: absolute;
     right: 0;
     text-align: center;
     top: 0;
     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;
@@ -461,12 +461,12 @@
 
 .focus-options {
     .pagebuilder-options {
-        right: 50%;
-        top: -20px;
-        transform: translate(50%, -50%);
         -moz-transition: opacity 200ms, visibility 200ms, transform 200ms;
         -o-transition: opacity 200ms, visibility 200ms, transform 200ms;
         -webkit-transition: opacity 200ms, visibility 200ms, transform 200ms;
+        right: 50%;
+        top: -20px;
+        transform: translate(50%, -50%);
         transition: opacity 200ms, visibility 200ms, transform 200ms;
         transition-delay: 0ms !important; // Arrow options have no delay in transitioning out