From db5c304e2968b5c16810900b9a63cfcf7e205e20 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Sun, 20 Aug 2023 13:38:35 +0300
Subject: [PATCH] make live previews play nice with window/slider resizes

---
 .../mobile/javascript/mobile.js               |  2 ++
 javascript/progressbar.js                     | 21 ++++---------------
 style.css                                     | 17 ++++++++-------
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/extensions-builtin/mobile/javascript/mobile.js b/extensions-builtin/mobile/javascript/mobile.js
index 12cae4b75..1b835a519 100644
--- a/extensions-builtin/mobile/javascript/mobile.js
+++ b/extensions-builtin/mobile/javascript/mobile.js
@@ -20,6 +20,8 @@ function reportWindowSize() {
         var button = gradioApp().getElementById(tab + '_generate_box');
         var target = gradioApp().getElementById(currentlyMobile ? tab + '_results' : tab + '_actions_column');
         target.insertBefore(button, target.firstElementChild);
+
+        gradioApp().getElementById(tab + '_results').classList.toggle('mobile', currentlyMobile);
     }
 }
 
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 8a3399826..a7c69937d 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -69,7 +69,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     var dateStart = new Date();
     var wasEverActive = false;
     var parentProgressbar = progressbarContainer.parentNode;
-    var parentGallery = gallery ? gallery.parentNode : null;
 
     var divProgress = document.createElement('div');
     divProgress.className = 'progressDiv';
@@ -80,16 +79,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
     divProgress.appendChild(divInner);
     parentProgressbar.insertBefore(divProgress, progressbarContainer);
 
-    if (parentGallery) {
+    if (gallery) {
         var livePreview = document.createElement('div');
         livePreview.className = 'livePreview';
-        parentGallery.insertBefore(livePreview, gallery);
+        gallery.insertBefore(livePreview, gallery.firstElementChild);
     }
 
     var removeProgressBar = function() {
         setTitle("");
         parentProgressbar.removeChild(divProgress);
-        if (parentGallery) parentGallery.removeChild(livePreview);
+        if (gallery) gallery.removeChild(livePreview);
         atEnd();
     };
 
@@ -100,12 +99,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
                 return;
             }
 
-            var rect = progressbarContainer.getBoundingClientRect();
-
-            if (rect.width) {
-                divProgress.style.width = rect.width + "px";
-            }
-
             let progressText = "";
 
             divInner.style.width = ((res.progress || 0) * 100.0) + '%';
@@ -151,17 +144,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
         }, function() {
             removeProgressBar();
         });
-    }
+    };
 
     var funLivePreview = function(id_task, id_live_preview) {
         request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
             if (res.live_preview && gallery) {
-                rect = gallery.getBoundingClientRect();
-                if (rect.width) {
-                    livePreview.style.width = rect.width + "px";
-                    livePreview.style.height = rect.height + "px";
-                }
-
                 var img = new Image();
                 img.onload = function() {
                     livePreview.appendChild(img);
diff --git a/style.css b/style.css
index 38a01e72d..5cd9f9c21 100644
--- a/style.css
+++ b/style.css
@@ -499,11 +499,15 @@ table.popup-table .link{
 
 /* live preview */
 .progressDiv{
-    position: relative;
+    position: absolute;
     height: 20px;
     background: #b4c0cc;
     border-radius: 3px !important;
-    margin-bottom: -3px;
+    top: -20px;
+}
+
+[id$=_results].mobile{
+    margin-top: 28px;
 }
 
 .dark .progressDiv{
@@ -528,12 +532,9 @@ table.popup-table .link{
 .livePreview{
     position: absolute;
     z-index: 300;
-    background-color: white;
-    margin: -4px;
-}
-
-.dark .livePreview{
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+    background: var(--background-fill-primary);
+    width: 100%;
+    height: 100%;
 }
 
 .livePreview img{