Operation elements now have decreasing z-index properties, meaning dropdowns do not get hidden. Fixes #925

src/web/waiters/RecipeWaiter.mjs

@@ -51,6 +51,7 @@ class RecipeWaiter {
                 }
             }.bind(this),
             onSort: function(evt) {
+                this.updateZIndices();
                 if (evt.from.id === "rec-list") {
                     document.dispatchEvent(this.manager.statechange);
                 }
@@ -149,6 +150,19 @@ class RecipeWaiter {
     }
 
 
+    /**
+     * Sets the z-index property on each operation to make sure that operations higher in the list
+     * have a higher index, meaning dropdowns are not hidden underneath subsequent operations.
+     */
+    updateZIndices() {
+        const operations = document.getElementById("rec-list").children;
+        for (let i = 0; i < operations.length; i++) {
+            const operation = operations[i];
+            operation.style.zIndex = 100 + operations.length - i;
+        }
+    }
+
+
     /**
      * Handler for favourite dragover events.
      * If the element being dragged is an operation, displays a visual cue so that the user knows it can
@@ -466,6 +480,7 @@ class RecipeWaiter {
         log.debug(`'${e.target.querySelector(".op-title").textContent}' added to recipe`);
 
         this.triggerArgEvents(e.target);
+        this.updateZIndices();
         window.dispatchEvent(this.manager.statechange);
     }