MC-5423: Scheduled Update slide out issues

- Re-write panel implementation to use position sticky

Author: davemacaulay

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

@@ -47,9 +47,13 @@
 }
 
 .pagebuilder-panel-wrapper {
+    bottom: 0;
     display: none;
     float: left;
     position: relative;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 87px;
     width: 150px;
 
     &.visible {
@@ -309,8 +313,5 @@
 }
 
 .modal-slide .modal-content .pagebuilder-panel-wrapper {
-    position: -webkit-sticky;
-    position: sticky;
     top: 10px;
-    bottom: 0;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/panel.js

@@ -17,6 +17,7 @@ import PageBuilder from "./page-builder";
 import PanelInterface from "./panel.d";
 import {Group} from "./panel/group";
 import {ContentType as GroupContentType} from "./panel/group/content-type";
+import {supportsPositionSticky} from "./utils/position-sticky";
 
 /**
  * @api
@@ -60,7 +61,9 @@ export default class Panel implements PanelInterface {
     public initListeners(): void {
         events.on("stage:" + this.id + ":readyAfter", () => {
             this.populateContentTypes();
-            this.onScroll();
+            if (!supportsPositionSticky()) {
+                this.onScroll();
+            }
             this.isVisible(true);
         });
     }
@@ -180,6 +183,7 @@ export default class Panel implements PanelInterface {
      * @returns {JQueryUI.DraggableOptions}
      */
     public getDraggableOptions(element: HTMLElement): JQueryUI.DraggableOptions {
+        // If we're within a modal make the containment be the current modal
         let containment: string | JQuery = "document";
         if ($(element).parents(".modal-inner-wrap").length > 0) {
             containment = $(element).parents(".modal-inner-wrap");

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/position-sticky.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/**
+ * Determine if the current browser supports position sticky
+ *
+ * @returns {boolean}
+ */
+export function supportsPositionSticky() {
+    if (!window.getComputedStyle) {
+        return false;
+    }
+
+    const testNode = document.createElement('div');
+
+    return ['', '-webkit-', '-moz-', '-ms-'].some(prefix => {
+        try {
+            testNode.style.position = prefix + 'sticky';
+        }
+        catch(e) {}
+
+        return testNode.style.position != '';
+    })
+}