[Fix] UI Fixes (#266)

Rather than have a bunch of pull-requests that @jebus will have to merge shall we collect some of the fixes for the UI issues I found in here.

- [x] #259
- [x] #260
- [x] #261
- [x] #262
- [x] #263
- [x] #264
- [x] #265

Co-authored-by: Tobias O <tobias.olenyi@envipath.com>
Reviewed-on: enviPath/enviPy#266
Co-authored-by: Liam Brydon <lbry121@aucklanduni.ac.nz>
Co-committed-by: Liam Brydon <lbry121@aucklanduni.ac.nz>

templates/modals/objects/generic_set_scenario_modal.html

@@ -18,7 +18,11 @@
 
       this.isLoading = true;
       try {
-        const response = await fetch('{% url "package scenario list" meta.current_package.uuid %}');
+        const response = await fetch('{% url "package scenario list" meta.current_package.uuid %}', {
+          headers: {
+            'Accept': 'application/json'
+          }
+        });
         const data = await response.json();
         this.scenarios = data;
         this.loaded = true;
@@ -47,7 +51,13 @@
     }
   }"
   @close="reset()"
-  x-init="$watch('$el.open', value => { if (value) loadScenarios(); })"
+  x-init="
+        new MutationObserver(() => {
+            if ($el.hasAttribute('open')) {
+                loadScenarios();
+            }
+        }).observe($el, { attributes: true });
+    "
 >
   <div class="modal-box max-w-4xl">
     <!-- Header -->
@@ -102,7 +112,8 @@
           </select>
           <label class="label">
             <span class="label-text-alt"
-              >Hold Ctrl/Cmd to select multiple scenarios</span
+              >Hold Ctrl/Cmd to select multiple scenarios. Ctrl/Cmd + click one
+              item to deselect it</span
             >
           </label>
         </div>