[#181] use 'regular' listeners for the maximiser icons, left a note for future reference

src/web/Manager.mjs

@@ -141,7 +141,16 @@ class Manager {
         document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
-        this.addDynamicListener(".btn-maximise", "click", this.controls.handlePaneMaximising, this.controls);
+        /**
+         *  A note for the Controls listeners below:
+         *
+         *  I would strongly prefer to just add one listener to all elements with the .btn-maximise class,
+         *  but for a reason I have not been able to uncover ( something to do with addDynamicListener? ) click events
+         *  don't properly bubble and the hitbox to maximise is unacceptably tiny
+         */
+        document.getElementById("maximise-recipe").addEventListener("click", this.controls.handlePaneMaximising.bind(this.controls))
+        document.getElementById("maximise-input").addEventListener("click", this.controls.handlePaneMaximising.bind(this.controls))
+        document.getElementById("maximise-output").addEventListener("click", this.controls.handlePaneMaximising.bind(this.controls))
 
         // Operations
         this.addMultiEventListener("#search", "keyup paste search click", this.ops.searchOperations, this.ops);
@@ -291,7 +300,7 @@ class Manager {
      * @param {Object} [scope=this] - The object to bind to the callback function
      *
      * @example
-     * // Calls the save function whenever the the keyup or paste events are triggered on any element
+     * // Calls the save function whenever the keyup or paste events are triggered on any element
      * // with the .saveable class
      * this.addMultiEventListener(".saveable", "keyup paste", this.save, this);
      */

src/web/TODO.md

@@ -9,7 +9,6 @@
 - view-heights not correct due to variable taskbar on mobile devices
 
 - need long press checks on mobile to add favourites and switch ingredient order
-- fix "hitbox" ( event bubbling ) for maximiser icon / button
 
 ### Desktop UI:
 ### General UI:

src/web/stylesheets/layout/_structure.css

@@ -6,6 +6,12 @@
  * @license Apache-2.0
  */
 
+#banner { height: var(--banner-height); }
+#operations { height: var(--operations-height); }
+#recipe { height: var(--recipe-height); }
+#IO { height: var(--io-height); }
+#controls { height: var(--controls-height); }
+
 #banner,
 #content-wrapper {
     position: absolute;
@@ -23,12 +29,6 @@
     margin-top: var(--banner-height);
 }
 
-#banner { height: var(--banner-height); }
-#operations { height: var(--operations-height); }
-#recipe { height: var(--recipe-height); }
-#IO { height: var(--io-height); }
-#controls { height: var(--controls-height); }
-
 #controls {
     bottom: 0;
 }