From 1f50c4bd91ea94a1e09ce5e59644f4c156609d50 Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Wed, 10 Aug 2022 16:04:34 -0400
Subject: [PATCH] Added code to set option width to 0 if not used (gen amount=1
 and no options to show).

---
 static/koboldai.css |  8 ++++----
 static/koboldai.js  | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index b14bd5a6..061de311 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -43,10 +43,10 @@
     --wi_card_bg_color: #262626;
     --wi_card_tag_bg_color: #404040;
     --wi_tag_color: #337ab7;
-	
+	--story_options_size: 30%;
 	--story_pinned_areas: "menuicon options gamescreen lefticon"
 						 "menuicon inputrow inputrow lefticon";
-	--story_pinned_area_widths: 30px 30% auto 30px;
+	--story_pinned_area_widths: 30px var(--story_options_size) auto 30px;
 }
 
 /*----------------Folder Tabs--------------------*/
@@ -598,7 +598,7 @@ body {
 	margin-right: var(--flyout_menu_closed_width);
 	grid-template-areas: "menuicon gamescreen options lefticon"
 						 "menuicon inputrow inputrow lefticon";
-	grid-template-columns: 30px auto 30% 30px;
+	grid-template-columns: 30px auto var(--story_options_size) 30px;
 	grid-template-rows: auto 100px;
 }
 .main-grid.settings_pinned {
@@ -615,7 +615,7 @@ body {
 	margin-right: var(--flyout_menu_width);
 	grid-template-areas: "menuicon gamescreen options lefticon"
 						 "menuicon inputrow inputrow lefticon";
-	grid-template-columns: 30px auto 30% 30px;
+	grid-template-columns: 30px auto var(--story_options_size) 30px;
 }
 }
 
diff --git a/static/koboldai.js b/static/koboldai.js
index 1c16e9aa..5de3107e 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -401,6 +401,17 @@ function var_changed(data) {
 		}
 	}
 	
+	//if we changed the gen amount, make sure our option area is set/not set
+	if ((data.classname == 'model') && (data.name == 'numseqs')) {
+		if (data.value == 1) {
+			var r = document.querySelector(':root');
+			r.style.setProperty('--story_options_size', 'fit-content(30%)');
+		} else {
+			var r = document.querySelector(':root');
+			r.style.setProperty('--story_options_size', '30%');
+		}
+	}
+	
 	//if we're updating generated tokens, let's show that in our status bar
 	if ((data.classname == 'model') && (data.name == 'tqdm_progress')) {
 		update_status_bar(data);
@@ -1380,12 +1391,12 @@ function options_on_right(data) {
 	if (data) {
 		setCookie("options_on_right", "true");
 		r.style.setProperty('--story_pinned_areas', '"menuicon gamescreen options lefticon"\n"menuicon inputrow inputrow lefticon"');
-		r.style.setProperty('--story_pinned_area_widths', '30px auto 30% 30px');
+		r.style.setProperty('--story_pinned_area_widths', '30px auto var(--story_options_size) 30px');
 		document.getElementById('preserve_game_space_setting').checked = true;
 	} else {
 		setCookie("options_on_right", "false");
 		r.style.setProperty('--story_pinned_areas', '"menuicon options gamescreen lefticon"\n"menuicon inputrow inputrow lefticon"');
-		r.style.setProperty('--story_pinned_area_widths', '30px 30% auto 30px');
+		r.style.setProperty('--story_pinned_area_widths', '30px var(--story_options_size) auto 30px');
 		document.getElementById('preserve_game_space_setting').checked = false;
 	}
 }