settings compact layour

CHANGELOG.md

@@ -1,16 +1,18 @@
 # Change Log for SD.Next
 
-## Update for 2023-08-24
+## Update for 2023-08-26
 
 - general:
   - all system and image paths are now relative by default  
   - fix extra networks previews  
   - add settings validation when performing load/save  
   - settings tab in ui now shows settings that are changed from default values  
+  - settings tab switch to compact view  
   - enable batch **img2img** scale-by workflows  
     now you can batch process with rescaling based on eah individual original image size  
   - update **gradio** major version  
     this may result in some smaller layout changes since its a major version change  
+    however, browser page load is now much faster  
   - optimize model hashing  
   - add cli param `--skip-all` that skips all installer checks  
     use at personal discretion, but it can be useful for bulk deployments  

javascript/style.css

@@ -120,7 +120,7 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
 #quicksettings > button { margin-left: -0.5em; }
 
 #settings { display: flex; gap: var(--layout-gap); }
-#settings div { border: none; min-width: max-content; }
+#settings div { border: none; display: inline-flex; justify-content: normal; }
 #settings > div.tab-content { flex: 10 0 75%; }
 
 #settings > div.tab-content > div { border: none; padding: 0; }
@@ -129,7 +129,7 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
 #settings > div.tab-nav button { display: block; border: none; text-align: left; white-space: initial; padding: 0; }
 #settings > div.tab-nav > #settings_show_all_pages { padding: var(--size-2) var(--size-4); }
 #settings .block.gradio-checkbox { margin: 0; width: auto; }
-#settings .dirtyable { display: grid; grid-template-columns: .3em auto; gap: .5em; }
+#settings .dirtyable { display: grid; gap: .5em; }
 #settings .dirtyable.hidden { display: none; }
 #settings .modification-indicator { height: 1.2em; border-radius: 1em !important; padding: 0; width: 0; margin-right: 0.5em; }
 #settings .modification-indicator:disabled { visibility: hidden; }