make very long lora lists display properly

src/Pages/Text2Image.cshtml

@@ -188,7 +188,7 @@
         </div>
         <div class="t2i-mid-split-bar splitter-bar" id="t2i-mid-split-bar"><div class="t2i-split-quickbutton t2i-mid-split-quickbutton" id="t2i-mid-split-quickbutton">&#x290B;</div></div>
         <div class="t2i-bottom-bar" id="t2i_bottom_bar" style="line-height:1.5">
-            <div class="bottom-info-bar-container">
+            <div class="bottom-info-bar-container" id="bottom_info_bar">
                 <span class="bottom-info-bar-component"><span class="other_info_span" id="other_info_span" style="min-height: 1rem"></span></span>
                 <span class="bottom-info-bar-component"><b class="translate">Model</b>: <select class="auto-dropdown current_model_view" onchange="autoSelectWidth(this)" id="current_model"></select></span>
                 <span class="bottom-info-bar-component" style="display:none;" id="current_presets_wrapper"><span><b class="translate">Current presets</b><span id="preset_info_slot"></span>: </span> <span id="current_preset_list_view"></span></span>

src/wwwroot/css/genpage.css

@@ -594,7 +594,6 @@ body {
     padding-left: 0.2rem;
     padding-right: 0.2rem;
     border-left: 1px solid var(--light-border);
-    white-space: nowrap;
 }
 .num_jobs_span {
     vertical-align: middle;

src/wwwroot/js/genpage/main.js

@@ -1277,6 +1277,7 @@ function pageSizer() {
     let topSplit2 = getRequiredElementById('t2i-top-2nd-split-bar');
     let midSplit = getRequiredElementById('t2i-mid-split-bar');
     let topBar = getRequiredElementById('t2i_top_bar');
+    let bottomInfoBar = getRequiredElementById('bottom_info_bar');
     let bottomBarContent = getRequiredElementById('t2i_bottom_bar_content');
     let inputSidebar = getRequiredElementById('input_sidebar');
     let mainInputsAreaWrapper = getRequiredElementById('main_inputs_area_wrapper');
@@ -1355,7 +1356,8 @@ function pageSizer() {
             editorSizebar.style.height = `calc(100vh - ${fixed} - ${altHeight})`;
             currentImageBatch.style.height = `calc(100vh - ${fixed})`;
             topBar.style.height = `calc(100vh - ${fixed})`;
-            bottomBarContent.style.height = `calc(${fixed} - 2rem)`;
+            let bottomBarHeight = bottomInfoBar.offsetHeight;
+            bottomBarContent.style.height = `calc(${fixed} - ${bottomBarHeight}px)`;
         }
         else {
             topSplit.style.height = '';

src/wwwroot/js/genpage/models.js

@@ -681,6 +681,9 @@ function updateLoraList() {
     }
     getRequiredElementById('current_loras_wrapper').style.display = currentLoras.length > 0 ? 'inline-block' : 'none';
     getRequiredElementById('lora_info_slot').innerText = ` (${currentLoras.length})`;
+    setTimeout(() => {
+        setPageBarsFunc();
+    }, 1);
 }
 
 function toggleSelectLora(lora) {

src/wwwroot/js/genpage/presets.js

@@ -193,6 +193,9 @@ function updatePresetList() {
     }
     getRequiredElementById('current_presets_wrapper').style.display = currentPresets.length > 0 ? 'inline-block' : 'none';
     getRequiredElementById('preset_info_slot').innerText = ` (${currentPresets.length}, overriding ${overrideCount} params)`;
+    setTimeout(() => {
+        setPageBarsFunc();
+    }, 1);
 }
 
 function applyOnePreset(preset) {