[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/collections/new_scenario_modal.html

@@ -16,12 +16,12 @@
 >
   <div class="modal-box max-w-3xl">
     <!-- Header -->
-    <h3 class="font-bold text-lg">New Scenario</h3>
+    <h3 class="text-lg font-bold">New Scenario</h3>
 
     <!-- Close button (X) -->
     <form method="dialog">
       <button
-        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
         :disabled="isSubmitting"
       >
         ✕
@@ -114,20 +114,37 @@
         </div>
 
         <div class="form-control mb-3">
-          <label class="label" for="scenario-type">
+          <label class="label">
             <span class="label-text">Scenario Type</span>
           </label>
-          <select
+          <div role="tablist" class="tabs tabs-border">
+            <button
+              type="button"
+              role="tab"
+              class="tab"
+              :class="{ 'tab-active': scenarioType === 'empty' }"
+              @click="scenarioType = 'empty'"
+            >
+              Empty Scenario
+            </button>
+            {% for k, v in scenario_types.items %}
+              <button
+                type="button"
+                role="tab"
+                class="tab"
+                :class="{ 'tab-active': scenarioType === '{{ v.name }}' }"
+                @click="scenarioType = '{{ v.name }}'"
+              >
+                {{ k }}
+              </button>
+            {% endfor %}
+          </div>
+          <input
+            type="hidden"
             id="scenario-type"
             name="scenario-type"
-            class="select select-bordered w-full"
             x-model="scenarioType"
-          >
-            <option value="empty" selected>Empty Scenario</option>
-            {% for k, v in scenario_types.items %}
-              <option value="{{ v.name }}">{{ k }}</option>
-            {% endfor %}
-          </select>
+          />
         </div>
 
         {% for type in scenario_types.values %}