fix some css changes

app/css/app.css

@@ -340,4 +340,47 @@ body {
 .tabs-group .tab-content {
   width: 100%;
   border: unset;
-}
+}
+
+/* BPMN JS CSS */
+/* Override default palette styles */
+
+.djs-palette {
+  /* position: relative;
+  display: block; */
+  width: 100% !important;
+  height: 90%;
+  overflow-y: auto;
+  /* padding: 0;
+  margin: 0;
+  left: 0;
+  top: 0; */
+}
+
+.djs-palette.two-column.open {
+  width: 230px !important;
+}
+
+.djs-palette-entries {
+  display: grid;
+}
+
+.djs-palette .entry,
+.djs-palette .djs-palette-toggle {
+  justify-items: center;
+  height: unset;
+  width: unset;
+  line-height: unset;
+  display: inline-grid;
+  cursor: pointer;
+}
+
+.bio-properties-panel-header {
+  background-color: #FAFAFA;
+}
+
+.djs-label {
+  font-family: 'Arial', sans-serif;
+}
+
+

app/css/bpmn-js.css

@@ -1,40 +0,0 @@
-
-/* Override default palette styles */
-
-.djs-palette {
-    position: relative;
-    display: block;
-    width: 100% !important;
-    height: 90%;
-    overflow-y: auto;
-    padding: 0;
-    margin: 0;
-    left: 0;
-    top: 0;
-}
-
-.djs-palette.two-column.open {
-    width: 95px;
-}
-
-.djs-palette-entries {
-    display: grid;
-}
-
-.djs-palette .entry,
-.djs-palette .djs-palette-toggle {
-    justify-items: center;
-    height: unset;
-    width: unset;
-    line-height: unset;
-    display: inline-grid;
-    cursor: pointer;
-}
-
-.bio-properties-panel-header {
-    background-color: #FAFAFA;
-}
-
-.djs-label {
-    font-family: 'Arial', sans-serif;
-}

app/spiffworkflow/InputOutput/IoPalette.js

@@ -312,7 +312,7 @@ IoPalette.prototype.init = function (event) {
     });
 
     // Move the palette
-    bpmnElementsDiv.appendChild(paletteContainer);
+    bpmnElementsDiv ? bpmnElementsDiv.appendChild(paletteContainer): null;
 
   }, 0);
 

app/spiffworkflow/properties/PropertiesPanelProvider.js

@@ -1,7 +1,7 @@
 const LOW_PRIORITY = 800;
 
 export default function PropertiesPanelProvider(propertiesPanel, eventBus) {
-  let elId;
+  let el;
 
   // eventBus.on('propertiesPanel.providersChanged', function (event) {
   //     console.log('------------------- propertiesPanel.providersChanged', event);
@@ -21,10 +21,12 @@ export default function PropertiesPanelProvider(propertiesPanel, eventBus) {
 
   this.getGroups = function (element) {
     return function (groups) {
-      // console.log('PropertiesPanelProvider -> getGroups:  ', groups, propertiesPanel, element);
-      // Only render the properties panel once per element
-      if (element.id !== elId || !elId) {
-        elId = element.id;
+      // Only render when : el is undefined (editor onload state) or user selects new element or user changes the type of a selected element
+      if (!el || element.id !== el.id || (element.type !== el.type && element.id === el.id)) {
+        el = {
+          id: element.id,
+          type: element.type
+        }
         this.render(groups);
       }
       return groups;
@@ -63,12 +65,12 @@ PropertiesPanelProvider.prototype.render = function (groups) {
         arrow.classList.remove('bio-properties-panel-arrow-right');
     
         // Handles the first click, to prevent the bpmn js library from handling it instead
-        header.addEventListener('click', function(event) {
+        header.addEventListener('click', function() {
           if (isFirstClick) {
             header.click();
             isFirstClick = false;
           }
-        }, { once: true });
+        });
       }
     }
 
@@ -154,4 +156,4 @@ PropertiesPanelProvider.prototype.render = function (groups) {
 
     resetTabsToShowGeneral();
   }, 0);
-}
+}