From 628473452106adf6d76a980c6a292d3255616eb1 Mon Sep 17 00:00:00 2001
From: Vivian Leung <vivz753@gmail.com>
Date: Fri, 18 Jul 2025 08:15:29 +0200
Subject: [PATCH] Fix Workers and Tags view when window width is 960px or less
 (#104413)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                      | 8 ++++----
 web/app/src/components/workers/WorkerDetails.vue | 2 +-
 web/app/src/views/JobsView.vue                   | 2 +-
 web/app/src/views/WorkersView.vue                | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 43d178a3..6fc125c8 100644
--- a/web/app/src/assets/base.css
+++ b/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);
   }
diff --git a/web/app/src/components/workers/WorkerDetails.vue b/web/app/src/components/workers/WorkerDetails.vue
index 93c32489..2e308aeb 100644
--- a/web/app/src/components/workers/WorkerDetails.vue
+++ b/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"
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index 47298a55..4e0768b6 100644
--- a/web/app/src/views/JobsView.vue
+++ b/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);
     },
 
diff --git a/web/app/src/views/WorkersView.vue b/web/app/src/views/WorkersView.vue
index df9ab9f4..3e95aeaf 100644
--- a/web/app/src/views/WorkersView.vue
+++ b/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>