From afea99a72b48fd88b101b1b2cea45fd527c3bc6f Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Wed, 30 Aug 2023 08:05:18 +0300
Subject: [PATCH] get progressbar to display correctly in extensions tab

---
 javascript/extensions.js | 2 +-
 modules/ui_extensions.py | 8 ++++++--
 style.css                | 5 +++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/javascript/extensions.js b/javascript/extensions.js
index 1f7254c5d..312131b76 100644
--- a/javascript/extensions.js
+++ b/javascript/extensions.js
@@ -33,7 +33,7 @@ function extensions_check() {
 
 
     var id = randomId();
-    requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
+    requestProgress(id, gradioApp().getElementById('extensions_installed_html'), null, function() {
 
     });
 
diff --git a/modules/ui_extensions.py b/modules/ui_extensions.py
index e01382676..67a243c35 100644
--- a/modules/ui_extensions.py
+++ b/modules/ui_extensions.py
@@ -557,8 +557,12 @@ def create_ui():
                         msg = '"--disable-extra-extensions" was used, remove it to load all extensions again'
                     html = f'<span style="color: var(--primary-400);">{msg}</span>'
 
-                info = gr.HTML(html)
-                extensions_table = gr.HTML('Loading...')
+                with gr.Row():
+                    info = gr.HTML(html)
+
+                with gr.Row(elem_classes="progress-container"):
+                    extensions_table = gr.HTML('Loading...', elem_id="extensions_installed_html")
+
                 ui.load(fn=extension_table, inputs=[], outputs=[extensions_table])
 
                 apply.click(
diff --git a/style.css b/style.css
index 92d3030e5..fb4e2f1f0 100644
--- a/style.css
+++ b/style.css
@@ -517,6 +517,11 @@ table.popup-table .link{
     background: #b4c0cc;
     border-radius: 3px !important;
     top: -20px;
+    width: 100%;
+}
+
+.progress-container{
+    position: relative;
 }
 
 [id$=_results].mobile{