From d2108ab2b919bd1d206a769531ded71e3644b0c0 Mon Sep 17 00:00:00 2001
From: Alex Heller <st162467@stud.uni-stuttgart.de>
Date: Wed, 17 May 2023 03:40:16 +0200
Subject: [PATCH] Made setting tabs move to top if not enough space

Currently the tabs will be ordered in grid fashion, but might be worth considering to somehow bring back the original flex tab layout.
This is hard though due to the interleaved modification indicators,
and the inability to wrap the tab headers in a custom div
(as gradio's svelte replaces the wrapper with each ui update)
---
 javascript/ui.js | 34 +++++++++++++++++++++++-----------
 style.css        | 28 +++++++++++++++++-----------
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/javascript/ui.js b/javascript/ui.js
index cedef18bb..bb774cf37 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -227,16 +227,6 @@ onUiUpdate(function(){
     registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button')
     registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button')
     registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button')
-    show_all_pages = gradioApp().getElementById('settings_show_all_pages')
-    settings_tabs = gradioApp().querySelector('#settings > div.tab-nav')
-    if(show_all_pages && settings_tabs){
-        settings_tabs.appendChild(show_all_pages)
-        show_all_pages.onclick = function(){
-            gradioApp().querySelectorAll('#settings > div[id^="settings_"]').forEach(function(elem){
-                elem.style.display = "block";
-            })
-        }
-    }
 })
 
 onOptionsChanged(function(){
@@ -262,7 +252,12 @@ onOptionsChanged(function(){
 onUiLoaded(function(){
     tab_nav_element = gradioApp().querySelector('#settings > .tab-nav')
     tab_nav_buttons = gradioApp().querySelectorAll('#settings > .tab-nav > button')
-    tab_elements = gradioApp().querySelectorAll('#settings > [id^="settings_"]')
+    tab_elements = gradioApp().querySelectorAll('#settings > div:not(.tab-nav)')
+
+    // Add a wrapper for the tab content (everything but the tab nav)
+    const tab_content_wrapper = document.createElement('div')
+    tab_content_wrapper.className = "tab-content"
+    tab_nav_element.parentElement.insertBefore(tab_content_wrapper, tab_nav_element.nextSibling)
 
     tab_elements.forEach(function(elem, index){
         // Add a modification indicator to the toplevel tab button
@@ -274,7 +269,24 @@ onUiLoaded(function(){
 
         // Add a modification indicator to the toplevel tab button
         tab_nav_element.insertBefore(new_indicator, tab_nav_buttons[index])
+
+        // Add the tab content to the wrapper
+        tab_content_wrapper.appendChild(elem)
     })
+
+    // Add show all pages button
+    const show_all_pages = gradioApp().getElementById('settings_show_all_pages')
+    tab_nav_element.appendChild(show_all_pages)
+    show_all_pages.onclick = function(){
+      gradioApp().querySelectorAll('#settings [id^="settings_"]').forEach(function(elem){
+          elem.style.display = "block";
+      })
+    }
+
+    // HACK: Add empty span inplace of modification indicator infront of show all button
+    const dummy_indicator = document.createElement('span')
+    tab_nav_element.insertBefore(dummy_indicator, show_all_pages)
+
     // Add the dirtyable class to the tab nav element
     tab_nav_element.classList.add('dirtyable')
 })
diff --git a/style.css b/style.css
index 1d0d8b030..cef5afdda 100644
--- a/style.css
+++ b/style.css
@@ -214,19 +214,30 @@ div#extras_scale_to_tab div.form{
 }
 
 #settings{
-    display: block;
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--layout-gap);
 }
 
-#settings > div{
+#settings div {
     border: none;
-    margin-left: 11em;
+}
+
+#settings > div.tab-content {
+    flex: 100000 0 75%;
+}
+
+#settings > div.tab-content > div{
+    border: none;
+    padding: 0;
 }
 
 #settings > div.tab-nav{
-    float: left;
-    margin-left: 0;
     display: grid;
-    grid-template-columns: .3em 10em;
+    grid-template-columns: repeat(auto-fill, .3em minmax(10em, 1fr));
+    flex: 1 0 auto;
+    width: 11em;
+    align-self: flex-start
 }
 
 #settings > div.tab-nav button{
@@ -238,14 +249,9 @@ div#extras_scale_to_tab div.form{
 }
 
 #settings > div.tab-nav > #settings_show_all_pages {
-    grid-column: 2;
     padding: var(--size-2) var(--size-4);
 }
 
-#settings > div.tabitem {
-    padding-top: 0;
-}
-
 #settings .block.gradio-checkbox {
     margin: 0;
     width: auto;