#514: User sees content snapshot on Category Page in Admin Panel - Added styles fixes

Author: hannahnida

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

@@ -55,20 +55,20 @@
 .admin__fieldset {
     > .admin__field.admin__field-wide.admin__field-page-builder[class]:not(.admin__field-option) {
         > .admin__field-label {
-            text-align: right;
-            min-height: 32px;
+            margin-bottom: @indent__xs;
             margin-top: @indent__xs;
+            min-height: 32px;
+            text-align: right;
         }
     }
 }
 
 .admin__field-wide.admin__field-page-builder {
-    margin-top: @indent__l;
+    margin-bottom: 32px;
 
     button.action-default {
         position: absolute;
-        top: @indent__xs;
         right: 0;
+        top: @indent__xs;
     }
-
 }

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

@@ -4,8 +4,8 @@
 //  */
 
 @border-size: 2px;
-@stage-overlay-background: rgba(0, 120, 249, 0.08);
-@stage-overlay-border: #4181E4;
+@wysiwyg-overlay-background: rgba(0, 120, 249, 0.08);
+@wysiwyg-overlay-border: #4181E4;
 
 .pagebuilder-header {
     display: none;
@@ -150,30 +150,34 @@
 .pagebuilder-wysiwyg-overlay {
     display: none;
     height: 0;
-    left: 0;
+    left: -1px;
     position: absolute;
-    top: 0;
+    top: -1px;
     visibility: hidden;
     width: 0;
 
     &.visible {
         -moz-transition: .175s ease-in-out;
         -webkit-transition: .175s ease-in-out;
+        border: 2px solid transparent;
+        border-radius: 2px;
         cursor: pointer;
         display: block;
-        height: 100%;
-        opacity: 0;
-        transform: translateY(-@indent__xs);
+        height: calc(~"100% + 2px");
+        transform: translateY(-2px);
         transition: .175s ease-in-out;
         visibility: visible;
-        width: 100%;
+        width: calc(~"100% + 2px");
         z-index: @z-index-2;
     }
 
     &._hover {
-        background-color: @stage-overlay-background;
-        border-radius: 2px;
-        border: 2px solid @stage-overlay-border;
+        background-color: @wysiwyg-overlay-background;
+        border-color: @wysiwyg-overlay-border;
+        transform: translateY(0);
+    }
+
+    ._keyfocus & {
         opacity: 1;
         transform: translateY(0);
     }
@@ -255,6 +259,7 @@
         -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         opacity: 0;
+        padding-top: 8px;
         transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         visibility: hidden;