Fix Show all models toggle

src/views/Model/List.vue

 <template>
   <main class="container is-fluid">
     <div class="columns">
-      <div class="field column is-one-third">
+      <div class="column is-one-third">
         <router-link
-          class="button is-primary is-pulled-right"
+          class="button is-primary is-pulled-right mb-2"
           :to="{ name: 'model-create' }"
           v-if="trainingMode"
         >
           Create a model
         </router-link>
 
-        <div v-if="compatibleWorkerId">
-          <!-- All bulma-switch does is build a visually dynamic toggle and hide the actual checkbox away; sometimes it doesn't
-          work, like here, perhaps because of is-pulled-right. So the entire toggle + label block is clickable and changes the
-          value of allModels -->
-          <div
-            class="is-pulled-right"
-            v-on:click="allModels = !allModels"
-          >
+        <div v-if="compatibleWorkerId" class="field has-text-right">
+          <div class="control">
+            <!--
+              bulma-switch hides the checkbox entirely because it can't be easily styled in CSS,
+              and instead uses :before and :after on the label to show a switch.
+              The ID on the checkbox and the `for` attribute on the label allows the label to trigger
+              the checkbox and properly switch the switch.
+              This component is used in multiple places, including in WorkerRun selection, so the modal
+              can be present multiple times on the page, so we have to make sure the IDs are unique to
+              avoid triggering only the switch of the first modal ever opened on the page.
+            -->
             <input
-              id="allModelsToggle"
+              :id="`allModelsToggle${uid}`"
               type="checkbox"
               class="switch is-rounded is-info"
-              :checked="allModels"
+              v-model="allModels"
             />
-            <label for="allModelsToggle">Show all models</label>
+            <label :for="`allModelsToggle${uid}`">Show all models</label>
           </div>
           <p class="help all-models-help is-pulled-right mb-2">By default, only models compatible with the selected worker are shown.</p>
         </div>
@@ -101,6 +104,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { mapActions } from 'pinia'
+import { uniqueId } from 'lodash'
 
 import { ModelListParameters } from '@/api'
 import { errorParser } from '@/helpers'
@@ -160,7 +164,8 @@ export default defineComponent({
     selectedModel: null,
     page: 1,
     nameFilter: '',
-    allModels: false
+    allModels: false,
+    uid: uniqueId()
   }),
   methods: {
     ...mapActions(useNotificationStore, ['notify']),