From 0a87a7bec35bc7d3246649868c82f4d524405037 Mon Sep 17 00:00:00 2001
From: Ben Zichettello <bz@projectample.com>
Date: Thu, 31 Aug 2023 15:25:05 -0400
Subject: [PATCH] ux: always render the label so prompts are aligned and add a
 min-width to the label to support two digit numbers

---
 ui/media/css/main.css | 15 +++++++++++++--
 ui/media/js/main.js   |  4 ++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 256087fa..45402d4c 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -715,15 +715,26 @@ div.img-preview img {
 .header-content > .drag-handle {
     min-width: initial !important;
 }
-.taskStatusLabel, .taskNumberOfImagesLabel {
+.taskLabel {
     font-size: 8pt;
     background:var(--background-color2);
     border: 1px solid rgb(61, 62, 66);
     padding: 2pt 4pt;
     border-radius: 2pt;
-    margin-right: 5pt;
     display: inline;
 }
+.taskStatusLabel {
+    margin-right: 5pt;
+}
+.multiNumberOfImages {
+    font-weight: bold;
+}
+.taskNumberOfImagesLabel {
+    min-width: 30px;
+    display: inline-block;
+    text-align: center;
+}
+
 .activeTaskLabel {
     background:rgb(0, 90, 30);
     border: 1px solid rgb(0, 75, 19);
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index a120bab3..0fbc0501 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1102,8 +1102,8 @@ function createTask(task) {
     taskEntry.className = "imageTaskContainer"
     taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
                                 <i class="drag-handle fa-solid fa-grip"></i>
-                                ${task.numOutputsTotal > 1 ? `<div class="taskNumberOfImagesLabel">✕${task.numOutputsTotal}</div>` : ''}
-                                <div class="taskStatusLabel">Enqueued</div>
+                                <div class="taskLabel taskNumberOfImagesLabel ${task.numOutputsTotal > 1 ? 'multiNumberOfImages' : ''}">✕${task.numOutputsTotal}</div>
+                                <div class="taskLabel taskStatusLabel">Enqueued</div>
                                 <button class="secondaryButton stopTask"><i class="fa-solid fa-xmark"></i> Cancel</button>
                                 <button class="tertiaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
                                 <div class="preview-prompt"></div>