From 597ecb1a4b8eaa952ad58d8bbe3cfa4ba2301b76 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Tue, 25 Mar 2025 00:46:21 +0100
Subject: [PATCH] Fix queue badge list (#5008)

---
 web/src/components/atomic/Badge.vue |  6 +--
 web/src/views/admin/AdminQueue.vue  | 68 ++++++++++++++++-------------
 2 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/web/src/components/atomic/Badge.vue b/web/src/components/atomic/Badge.vue
index 6085bfcab..0335acea0 100644
--- a/web/src/components/atomic/Badge.vue
+++ b/web/src/components/atomic/Badge.vue
@@ -1,7 +1,7 @@
 <template>
-  <span class="inline-flex text-xs font-medium">
+  <span class="inline-flex items-center text-xs font-medium">
     <span
-      class="border-wp-state-neutral-100 bg-wp-state-neutral-100 flex items-center rounded-l-full border-2 py-0.5 pr-1 pl-2 text-gray-300"
+      class="border-wp-state-neutral-100 bg-wp-state-neutral-100 rounded-l-full border-1 py-0.5 pr-1 pl-2 whitespace-nowrap text-gray-300"
       :class="{
         'rounded-r-full pr-2': value === undefined,
       }"
@@ -10,7 +10,7 @@
     </span>
     <span
       v-if="value !== undefined"
-      class="border-wp-state-neutral-100 flex items-center rounded-r-full border-2 py-0.5 pr-2 pl-1"
+      class="border-wp-state-neutral-100 rounded-r-full border-1 py-0.5 pr-2 pl-1 whitespace-nowrap"
     >
       {{ value }}
     </span>
diff --git a/web/src/views/admin/AdminQueue.vue b/web/src/views/admin/AdminQueue.vue
index 3a03bc7ed..6e723e5c7 100644
--- a/web/src/views/admin/AdminQueue.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -30,45 +30,51 @@
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="bg-wp-background-200! dark:bg-wp-background-100! mb-2 items-center"
+          class="bg-wp-background-200! dark:bg-wp-background-100! mb-2 flex-col items-center gap-4"
         >
-          <div
-            class="flex items-center"
-            :title="
-              task.status === 'pending'
-                ? $t('admin.settings.queue.task_pending')
-                : task.status === 'running'
-                  ? $t('admin.settings.queue.task_running')
-                  : $t('admin.settings.queue.task_waiting_on_deps')
-            "
-          >
-            <Icon
-              :name="
+          <div class="flex w-full items-center justify-between border-b pb-2">
+            <div
+              class="flex items-center gap-2"
+              :title="
                 task.status === 'pending'
-                  ? 'status-pending'
+                  ? $t('admin.settings.queue.task_pending')
                   : task.status === 'running'
-                    ? 'status-running'
-                    : 'status-declined'
+                    ? $t('admin.settings.queue.task_running')
+                    : $t('admin.settings.queue.task_waiting_on_deps')
               "
-              :class="{
-                'text-wp-error-100': task.status === 'waiting_on_deps',
-                'text-wp-state-info-100': task.status === 'running',
-                'text-wp-state-neutral-100': task.status === 'pending',
-              }"
-            />
+            >
+              <Icon
+                :name="
+                  task.status === 'pending'
+                    ? 'status-pending'
+                    : task.status === 'running'
+                      ? 'status-running'
+                      : 'status-declined'
+                "
+                :class="{
+                  'text-wp-error-100': task.status === 'waiting_on_deps',
+                  'text-wp-state-info-100': task.status === 'running',
+                  'text-wp-state-neutral-100': task.status === 'pending',
+                }"
+              />
+              <span>{{ task.id }}</span>
+            </div>
+            <div class="flex items-center">
+              <span class="ml-auto flex gap-2">
+                <Badge v-if="task.agent_id !== 0" :label="$t('admin.settings.queue.agent')" :value="task.agent_id" />
+                <Badge
+                  v-if="task.dependencies"
+                  :label="$t('admin.settings.queue.waiting_for')"
+                  :value="task.dependencies.join(', ')"
+                />
+              </span>
+            </div>
           </div>
-          <span class="ml-2">{{ task.id }}</span>
-          <span class="ml-auto flex gap-2">
-            <Badge v-if="task.agent_id !== 0" :label="$t('admin.settings.queue.agent')" :value="task.agent_id" />
+          <div class="flex w-full flex-wrap gap-2">
             <template v-for="(value, label) in task.labels">
               <Badge v-if="value" :key="label" :label="label.toString()" :value="value" />
             </template>
-            <Badge
-              v-if="task.dependencies"
-              :label="$t('admin.settings.queue.waiting_for')"
-              :value="task.dependencies.join(', ')"
-            />
-          </span>
+          </div>
         </ListItem>
       </div>
     </div>