From 2a40d3c603448d15e209814366f2d6ab25e52398 Mon Sep 17 00:00:00 2001
From: AUTOMATIC1111 <16777216c@gmail.com>
Date: Sun, 26 Nov 2023 14:58:47 +0300
Subject: compact prompt layout: preserve scroll when switching between lora
 tabs

---
 javascript/extraNetworks.js  |  4 ++++
 modules/ui_extra_networks.py |  5 ++++-
 style.css                    | 12 ++++++++++--
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index a1bf29a8..a787372c 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -130,6 +130,10 @@ function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePromp
     } else {
         promptContainer.insertBefore(prompt, promptContainer.firstChild);
     }
+
+    if (elem) {
+        elem.classList.toggle('extra-page-prompts-active', showNegativePrompt || showPrompt);
+    }
 }
 
 
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index f03e2033..f3b23cc9 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -370,6 +370,9 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
 
     for page in ui.stored_extra_pages:
         with gr.Tab(page.title, elem_id=f"{tabname}_{page.id_page}", elem_classes=["extra-page"]) as tab:
+            with gr.Column(elem_id=f"{tabname}_{page.id_page}_prompts", elem_classes=["extra-page-prompts"]):
+                pass
+
             elem_id = f"{tabname}_{page.id_page}_cards_html"
             page_elem = gr.HTML('Loading...', elem_id=elem_id)
             ui.pages.append(page_elem)
@@ -400,7 +403,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
         allow_prompt = "true" if page.allow_prompt else "false"
         allow_negative_prompt = "true" if page.allow_negative_prompt else "false"
 
-        jscode = 'extraNetworksTabSelected("' + tabname + '", "' + f"{tabname}_{page.id_page}" + '", ' + allow_prompt + ', ' + allow_negative_prompt + ');'
+        jscode = 'extraNetworksTabSelected("' + tabname + '", "' + f"{tabname}_{page.id_page}_prompts" + '", ' + allow_prompt + ', ' + allow_negative_prompt + ');'
 
         tab.select(fn=lambda: [gr.update(visible=True) for _ in tab_controls],  _js='function(){ ' + jscode + ' }', inputs=[], outputs=tab_controls, show_progress=False)
 
diff --git a/style.css b/style.css
index 73162022..f8b42636 100644
--- a/style.css
+++ b/style.css
@@ -840,8 +840,16 @@ footer {
 
 /* extra networks UI */
 
-.extra-page .prompt{
-    margin: 0 0 0.5em 0;
+.extra-page > div.gap{
+    gap: 0;
+}
+
+.extra-page-prompts{
+    margin-bottom: 0;
+}
+
+.extra-page-prompts.extra-page-prompts-active{
+    margin-bottom: 1em;
 }
 
 .extra-network-cards{
-- 
cgit v1.2.1