MC-3477: Polish prototype and apply rearranging in preview

- Updated button item link appearance style to be inline block
- Updated options filter logic
- Resolved issue with dragging to first and last position

Author: Hwashiang Yu

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

@@ -41,6 +41,7 @@
         @_line-height: @pagebuilder-button__line-height
     );
     .lib-css(font-weight, @font-weight__semibold);
+    display: inline-block;
 }
 
 .placeholder-text {

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/button-item/preview.js

@@ -22,7 +22,7 @@ export default class Preview extends BasePreview {
     public retrieveOptions(): OptionInterface[] {
         const options = super.retrieveOptions();
         const newOptions = options.filter((option) => {
-            return ["remove", "title", "move"].indexOf(option.code) !== -1;
+            return ["remove", "title", "move"].indexOf(option.code) === -1;
         });
         const removeClasses = ["remove-structural"];
         let removeFn = this.onOptionRemove;

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

@@ -108,8 +108,9 @@ export default class Preview extends PreviewCollection {
             items: ".pagebuilder-content-type-wrapper",
             cursor: "grabbing",
             containment: "parent",
+            tolerance: this.data.main.attributes()["data-appearance"] === "stacked" ? "pointer" : "intersect",
             revert: 200,
-            cursorAt: { left: 25, top: 25 },
+            cursorAt: { left: 15, top: 15 },
             disabled: this.parent.children().length <= 1,
             /**
              * Provide custom helper element
@@ -181,11 +182,11 @@ export default class Preview extends PreviewCollection {
             change(event, element) {
                 element.placeholder.stop(true, false);
                 if (this.getAttribute("data-appearance") === "stacked") {
-                    element.placeholder.css({height: element.item.height() / 2});
+                    element.placeholder.css({height: element.item.height() / 1.2});
                     element.placeholder.animate({height: element.item.height()}, 200, "linear");
                 }
                 if (this.getAttribute("data-appearance") === "inline") {
-                    element.placeholder.css({width: element.item.width() / 2});
+                    element.placeholder.css({width: element.item.width() / 1.2});
                     element.placeholder.animate({width: element.item.width()}, 200, "linear");
                 }
                 placeholderGhost.stop(true, false).animate({

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/button-item/preview.ts

@@ -18,6 +18,7 @@ button {
         );
         .lib-css(font-weight, @font-weight__semibold);
         box-shadow: none;
+        display: inline-block;
     }
 
     &.pagebuilder-button-primary {