From 3d5133209ba0ca738ef31c023c81d8370625cac3 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Sun, 15 Jan 2023 23:34:56 -0800
Subject: [PATCH] Group image containers (DOM tweak)

Move image containers in their own container to create a clear delineation in the DOM. Purely DOM structural adjustment meant to make a sticky footer possible in the preview pane (for plugins).
---
 ui/index.html       | 6 ++++--
 ui/media/js/main.js | 3 ++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 8d72d0e4..7cc98058 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -281,8 +281,10 @@
                 and selecting the desired modifiers.<br/><br/>
                 Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
             </div>
-            <div id="preview-tools">
-                <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
+            <div id="preview-content">
+                <div id="preview-tools">
+                    <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
+                </div>
             </div>
         </div>
         </div>
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index e515787b..e32021aa 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -66,6 +66,7 @@ let maskSetting = document.querySelector('#enable_mask')
 const processOrder = document.querySelector('#process_order_toggle')
 
 let imagePreview = document.querySelector("#preview")
+let imagePreviewContent = document.querySelector("#preview-content")
 imagePreview.addEventListener('drop', function(ev) {
     const data = ev.dataTransfer?.getData("text/plain");
     if (!data) {
@@ -902,7 +903,7 @@ function createTask(task) {
     })
 
     task.isProcessing = true
-    taskEntry = imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
+    taskEntry = imagePreviewContent.insertBefore(taskEntry, previewTools.nextSibling)
     htmlTaskMap.set(taskEntry, task)
 
     task.previewPrompt.innerText = task.reqBody.prompt