#609: Content Type Toolbar hidden under PageBuilder header in Full screen - Fixed Content Type Toolbar translateY calculation

Author: hannahnida

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

@@ -11,6 +11,7 @@ import Preview from "./content-type/preview";
 import {PreviewCollectionInterface} from "./content-type/preview-collection.types";
 import {PreviewInterface} from "./content-type/preview.types";
 import checkStageFullScreen from "./utils/check-stage-full-screen";
+import pageBuilderHeaderHeight from "./utils/pagebuilder-header-height";
 import deferred, {DeferredInterface} from "./utils/promise-deferred";
 
 /**
@@ -78,9 +79,11 @@ export default class Toolbar {
     public onFocusIn(context: ContentTypeToolbarPreviewInterface, event: Event): void {
         const currentContentTypeTarget = context.toolbar.getCurrentContentTypeTarget();
         const toolbarOptions = currentContentTypeTarget.find(".pagebuilder-toolbar-options");
+        const currentContentTypeTargetClientRectTop = currentContentTypeTarget[0].getBoundingClientRect().top
+                                                      - pageBuilderHeaderHeight(context.contentType.stageId);
         // Change toolbar orientation if overflow on full screen mode
         if (checkStageFullScreen(context.contentType.stageId)
-            && currentContentTypeTarget[0].getBoundingClientRect().top < toolbarOptions.outerHeight()
+            && currentContentTypeTargetClientRectTop < toolbarOptions.outerHeight()
         ) {
             context.toolbar.observer = new MutationObserver(() => {
                 toolbarOptions.css("transform", "translateY(" + currentContentTypeTarget.outerHeight() + "px)");

app/code/Magento/PageBuilder/view/adminhtml/web/js/wysiwyg/tinymce4.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+import $ from "jquery";
+
+/**
+ * Checks if PageBuilder has header and return it's height
+ *
+ * @param {string} stageId
+ * @returns {number}
+ */
+export default function pageBuilderHeaderHeight(stageId: string): number {
+    const $stageWrapper = $("#" + stageId).closest('.pagebuilder-stage-wrapper');
+    const $pageBuilderHeader = $stageWrapper.find('.pagebuilder-header');
+    return (!!$pageBuilderHeader.length) ? $pageBuilderHeader.height() : 0;
+}

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

@@ -12,6 +12,7 @@ import WysiwygInstanceInterface from "wysiwygAdapter";
 import {AdditionalDataConfigInterface} from "../content-type-config.types";
 import DataStore from "../data-store";
 import checkStageFullScreen from "../utils/check-stage-full-screen";
+import pageBuilderHeaderHeight from "../utils/pagebuilder-header-height";
 import WysiwygInterface from "./wysiwyg-interface";
 
 /**
@@ -203,7 +204,8 @@ export default class Wysiwyg implements WysiwygInterface {
             return;
         }
 
-        const inlineWysiwygClientRectTop = this.getFixedToolbarContainer().get(0).getBoundingClientRect().top;
+        const inlineWysiwygClientRectTop = this.getFixedToolbarContainer().get(0).getBoundingClientRect().top
+                                         - pageBuilderHeaderHeight(this.stageId);
 
         if (!checkStageFullScreen(this.stageId) || $inlineToolbar.height() < inlineWysiwygClientRectTop) {
             $inlineToolbar.css("transform", "translateY(-100%)");