From 49b7c74117753ba515d85acde7c7f91032ef725e Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Mon, 25 Nov 2024 21:16:49 +0000
Subject: [PATCH 1/2] Divide the image selection form into two columns

---
 views/pages/tasks-new.ejs | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/views/pages/tasks-new.ejs b/views/pages/tasks-new.ejs
index 048e8f8..dea6a99 100644
--- a/views/pages/tasks-new.ejs
+++ b/views/pages/tasks-new.ejs
@@ -139,7 +139,7 @@
 
 <!-- BEGIN MODAL -->
     <div class="modal fade" id="imageSelectionModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-      <div class="modal-dialog">
+      <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">Select Images</h5>
@@ -152,7 +152,8 @@
           </div>
 
           <form id="imageSelectionForm">
-          <div class="modal-body">
+          <div class="modal-body d-flex flex-row gap-4 justify-content-between">
+            <div class="w-50" style="margin-right: 50px;">
             <div class="input-group mb-1">
               <div class="form-floating">
                 <input type="text" id="originalFilenameLower" name="originalFilenameLower" class="form-control" />
@@ -264,7 +265,9 @@
                 </div>
               </fieldset>
             </div>
+            </div>
 
+            <div class="w-50">
             <p class="mt-4">Labels used in Images</p>
             <div
               class="input-group mb-3" >
@@ -332,6 +335,7 @@
               </fieldset>
             </div>
           </div>
+          </div>
           </form>
           <div class="modal-footer d-flex justify-content-between">
             <em><span id="filteredImageCountModal"><%=imageCountTotal%></span> matching images</em>

From 98ca2643fcbfea5414585f7bb8f713ffa07806ca Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Tue, 26 Nov 2024 01:13:30 +0000
Subject: [PATCH 2/2] adjust component height

---
 views/pages/tasks-new.ejs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/views/pages/tasks-new.ejs b/views/pages/tasks-new.ejs
index dea6a99..9d9910d 100644
--- a/views/pages/tasks-new.ejs
+++ b/views/pages/tasks-new.ejs
@@ -268,11 +268,11 @@
             </div>
 
             <div class="w-50">
-            <p class="mt-4">Labels used in Images</p>
+            <p >Labels used in Images</p>
             <div
               class="input-group mb-3" >
               <div class="form-floating">
-                <select size="5" class="form-select form-control" multiple name="labels" id="labels" aria-label="multiple select">
+                <select size="5" class="form-select form-control" multiple name="labels" id="labels" aria-label="multiple select" style="height: auto;">
                   <% for (const labelName of allLabelNames) { %>
                     <option><%=labelName%></option>
                   <% } %>