fix 'undefined' list item clone bug, hitboxes for recipe icons more comfortable, fix problem where the operation-dropdown would display on click / tap of elements in expanded recipe view ( mobile )

src/web/TODO.md

@@ -4,7 +4,5 @@ operations:
 manual testing issues
 
 mobile:
-- drag any recipe li will have an ( clone? ) extra li below it with 'undefined' title. Not on desktop
+- double tap on mobile recipe list sometimes really annoying
-- hitboxes combined with drag / mouse events on breakpoint and disable icons kind of sucks
+- same for grabbing items in rec-list. Especially 'magic' for whatever reason?
-- some issues tapping on ingredients causing the op-dropdown to display
-- some issues with ingredient breakpoint / disable background colors

src/web/components/c-ingredient-li.mjs

@@ -34,6 +34,11 @@ export class CIngredientLi extends HTMLElement {
         this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
+    cloneNode() {
+        const { app, name, args } = this;
+        return new CIngredientLi( app, name, args );
+    }
+
     /**
      * Remove listeners on disconnectedCallback
      */

src/web/stylesheets/components/_operation.css

@@ -280,13 +280,19 @@ input.toggle-string {
 }
 
 .recipe-icons i {
-    margin-right: 10px;
+    height: 30px;
+    width: 30px;
+    text-align: center;
     vertical-align: baseline;
     float: right;
     font-size: 18px;
     cursor: pointer;
 }
 
+.recipe-icons i:last-child {
+    margin-right: 10px;
+}
+
 .disable-icon {
     color: var(--disable-icon-colour);
 }

src/web/waiters/ControlsWaiter.mjs

@@ -497,7 +497,7 @@ ${navigator.userAgent}
      */
     onMaximisedRecipeClick() {
         // if #recipe is maximised & rec-list is empty on mobile UI
-        if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > li").length === 0) {
+        if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > c-ingredient-li").length === 0) {
             // close max pane and display the expanded #operations-dropdown
             this.setPaneMaximised("recipe", false);
             this.manager.ops.openOpsDropdown();