Fix Workers and Tags view when window width is 960px or less (#104413)

Issue likely began after 7b31eba8d7614e82cfcc4583e1dd3c2f40f87944 as
it was an issue with header not being properly positioned.

Just needed to add `header-L` and `header-R` to `grid-template-areas`
and adjust the rest accordingly, and fix a class name typo.

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104413
Reviewed-by: Sybren A. Stüvel <sybren@blender.org>

web/app/src/assets/base.css

@@ -146,10 +146,10 @@ body.is-two-columns #app {
 @media (max-width: 960px) {
   body.is-two-columns #app {
     grid-template-areas:
-      "header"
-      "col-1"
-      "col-2"
-      "footer";
+      "header-L header-R"
+      "col-1 col-1"
+      "col-2 col-2"
+      "footer footer";
     grid-template-columns: 1fr;
     grid-template-rows: var(--header-height) 1fr 1fr var(--footer-height);
   }

web/app/src/components/workers/WorkerDetails.vue

@@ -46,7 +46,7 @@
     <section class="worker-tags" v-if="workers.tags && workers.tags.length">
       <h3 class="sub-title">Tags</h3>
       <ul>
-        <li v-for="tag in workers.tags">
+        <li :key="tag.id" v-for="tag in workers.tags">
           <switch-checkbox
             :isChecked="thisWorkerTags[tag.id]"
             :label="tag.name"

web/app/src/views/JobsView.vue

@@ -147,7 +147,7 @@ export default {
      */
     onSioTaskUpdate(taskUpdate) {
       if (this.$refs.tasksTable) this.$refs.tasksTable.processTaskUpdate(taskUpdate);
- 
+
       this.notifs.addTaskUpdate(taskUpdate);
     },
 

web/app/src/views/WorkersView.vue

@@ -26,7 +26,7 @@
   grid-area: col-1;
 }
 
-.col-workers-2 {
+.col-workers-details {
   grid-area: col-2;
 }
 </style>