#514: User sees content snapshot on Category Page in Admin Panel - Fixed MouseOver events, added mouseover events to Edit in PB button, fixed styles

Author: hannahnida

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

@@ -62,7 +62,7 @@
     }
 }
 
-.admin__field-page-builder {
+.admin__field-wide.admin__field-page-builder {
     margin-top: @indent__l;
 
     button.action-default {

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

@@ -8,6 +8,7 @@
 @stage-overlay-border: #4181E4;
 
 .pagebuilder-header {
+    display: none;
     opacity: 0;
     text-align: right;
 
@@ -22,6 +23,7 @@
     }
 
     &.visible {
+        display: block;
         opacity: 1;
         visibility: visible;
     }
@@ -69,6 +71,7 @@
             background: @color-very-dark-grayish-orange;
             border: none;
             border-bottom: 1px solid @color-brownie-almost;
+            display: block;
             left: 150px;
             opacity: 0;
             padding: 0;
@@ -95,6 +98,7 @@
             &.visible {
                 opacity: 1;
                 visibility: visible;
+                display: block;
             }
         }
 
@@ -142,9 +146,6 @@
     }
 }
 
-.page-builder-wysiwyg-wrapper {
-  position: relative;
-}
 
 .pagebuilder-wysiwyg-overlay {
     display: none;
@@ -178,6 +179,10 @@
     }
 }
 
+.pagebuilder-wysiwyg-wrapper {
+    position: relative;
+}
+
 .pagebuilder-wysiwyg-wrapper.pagebuilder-transition-out .pagebuilder-stage-wrapper {
     .pagebuilder-stage-wrapper.stage-full-screen;
 

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

@@ -58,6 +58,7 @@
     transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
     visibility: hidden;
     width: 150px;
+    display: none;
 
     &.no-position-sticky {
         top: 0;
@@ -66,6 +67,7 @@
     &.visible {
         opacity: 1;
         visibility: visible;
+        display: block;
 
         &.sticky-top {
             position: fixed;

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -5,28 +5,29 @@
  */
 -->
 
-<div visible="visible" css="{'_disabled': disabled}" class="page-builder-wysiwyg-wrapper">
+<div visible="visible" css="{'_disabled': disabled}">
     <button if="wysiwygConfigData()['pagebuilder_button'] || wysiwygConfigData()['pagebuilder_content_snapshot']"
             type="button"
             class="action-default action"
             ko-disabled="disabled"
-            click="pageBuilderEditButtonClick.bind($data)">
+            click="pageBuilderEditButtonClick.bind($data)"
+            event="{ mouseover: pageBuilder.onStageOverlayMouseOver, mouseout: pageBuilder.onStageOverlayMouseOut }, mouseoverBubble: false">
         <span translate="pageBuilderEditButtonText" />
     </button>
     <if args="isComponentInitialized">
         <div visible="visiblePageBuilder"
              class="pagebuilder-wysiwyg-wrapper"
              css="{'pagebuilder-transition-in': wysiwygConfigData()['pagebuilder_button'] && !wysiwygConfigData()['pagebuilder_content_snapshot'], 'trigger-transition': transition, 'pagebuilder-transition-out': transitionOut}">
-        <with args="pageBuilder">
+            <div if="wysiwygConfigData()['pagebuilder_content_snapshot']"
+                 class="pagebuilder-wysiwyg-overlay"
+                 click="pageBuilderEditButtonClick.bind($data)"
+                 css="'visible': !pageBuilder.isFullScreen()"
+                 event="{ mouseover: pageBuilder.onStageOverlayMouseOver, mouseout: pageBuilder.onStageOverlayMouseOut }, mouseoverBubble: false"
+                 tabindex="0">
+            </div>
+            <with args="pageBuilder">
                 <render />
             </with>
         </div>
     </if>
-    <div if="wysiwygConfigData()['pagebuilder_content_snapshot']"
-         class="pagebuilder-wysiwyg-overlay"
-         click="pageBuilderEditButtonClick.bind($data)"
-         css="'visible': !pageBuilder.isFullScreen()"
-         event="{ mouseover: pageBuilder.onStageOverlayMouseOver, mouseout: pageBuilder.onStageOverlayMouseOut }, mouseoverBubble: false"
-         tabindex="0">
-    </div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/wysiwyg.html

@@ -104,14 +104,14 @@ export default class PageBuilder implements PageBuilderInterface {
      * MouseOver event for Stage Overlay
      */
     public onStageOverlayMouseOver (): void {
-        $('.pagebuilder-stage-overlay').addClass('_hover');
+        $('.pagebuilder-wysiwyg-overlay').addClass('_hover');
     }
 
     /**
      * MouseOut event for Stage Overlay
      */
     public onStageOverlayMouseOut (): void {
-        $('.pagebuilder-stage-overlay').removeClass('_hover');
+        $('.pagebuilder-wysiwyg-overlay').removeClass('_hover');
     }
 
     /**