Undo of Merge 128. Had unintended consequences

static/koboldai.css

@@ -1104,16 +1104,17 @@ body {
 /* ------------------- Desktop Mode --------------------------- */
 .main-grid {
 	transition: margin-left .5s;
-	display: grid;
+
-	height: 98vh;
+	display: flex;
+	flex-direction: column;
+
+	height: 100vh;
+	padding: 10px 30px;
+
 	margin-left: var(--setting_menu_closed_width_no_pins_width);
 	margin-right: var(--flyout_menu_closed_width);
-	grid-template-areas: "menuicon gamescreen options lefticon"
-						 "menuicon theme theme lefticon"
-						 "menuicon inputrow inputrow lefticon";
-	grid-template-columns: 30px auto var(--story_options_size) 30px;
-	grid-template-rows: auto min-content 100px;
 }
+
 .main-grid.settings_pinned {
 	margin-left: var(--flyout_menu_width);
 	grid-template-columns: 30px auto var(--story_options_size) 30px;
@@ -1150,6 +1151,16 @@ body {
 }
 }
 
+#main-container {
+	display: flex;
+
+	/* Don't expand! */
+	min-height: 0;
+
+	/* Grow vertically as a child; take up as much space as we can! */
+	flex-grow: 1;
+}
+
 
 
 /* ---------------------------------- GAME SCREEN ----------------------------------*/
@@ -1159,11 +1170,10 @@ body {
 	box-shadow: var(--light_shadow_value);
 	color: var(--gamescreen_text);
 	width: 100%;
-	grid-area: gamescreen;
+	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
 	overflow-x: hidden;
-	margin-top: 10px;
 	vertical-align: bottom;
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 	font-size: calc((1em*var(--game_screen_font_size_adjustment)) + var(--font_size_adjustment));
@@ -1176,7 +1186,6 @@ body {
 }
 
 .gametext {
-	margin-top: auto;
 	padding: 0px 5px 10px 10px;
 	vertical-align: bottom;
 	overflow-y: scroll;
@@ -1199,8 +1208,7 @@ body {
 }
 
 .sequence_area {
-	margin-top: 10px;
+	max-width: var(--story_options_size);
-	grid-area: options;
 	background-color: var(--sequence_area_background);
 	overflow-y: scroll;
 }
@@ -1297,7 +1305,6 @@ body {
 }
 
 .inputrow {
-	grid-area: inputrow;
 	z-index: 2;
 	display: grid;
 	grid-template-areas: "textarea statusbar statusbar statusbar"
@@ -1326,10 +1333,10 @@ body {
 }
 
 #themetext{
-	grid-area: textarea;
 	height: 100%;
 	width: 100%;
 	padding: 5px;
+	grid-area: textarea;
 	border-radius: var(--radius_inputbox);
 }
 

templates/index_new.html

@@ -45,24 +45,19 @@
 	<!------------ Main Screen--------------------->
 	<div id="main-grid" class="main-grid settings_pinned" onclick="close_menus();">
 		<!------------ Game Text Screen--------------------->
-		<div class="gamescreen" id="gamescreen">
+		<div id="main-container">
-			<div id="disconnect_message"><center><h1>Disconnected</h1></center></div>
+			<div class="gamescreen" id="gamescreen">
-			<div class="gametext" id="Selected Text" contenteditable=true onblur="edit_game_text();selected_game_chunk = null;clear_edit_game_text_tag();" onclick="select_game_text(null);" onkeyup="select_game_text(event);">
+				<div id="disconnect_message"><center><h1>Disconnected</h1></center></div>
-				<span id="story_prompt" class="var_sync_story_prompt var_sync_alt_story_prompt_length var_sync_alt_story_prompt_in_ai rawtext"></span>
+				<div class="gametext" id="Selected Text" contenteditable=true onblur="edit_game_text();selected_game_chunk = null;clear_edit_game_text_tag();" onclick="select_game_text(null);" onkeyup="select_game_text(event);">
-				<span id="Delete Me">
+					<span id="story_prompt" class="var_sync_story_prompt var_sync_alt_story_prompt_length var_sync_alt_story_prompt_in_ai rawtext"></span>
-					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+				</div>
-					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-				</span>
 			</div>
+
+			<!------------ Sequences --------------------->
+			<div id="action_count" class="var_sync_actions_Action_Count hidden"></div>
+			<div id="Select Options" class="sequence_area"></div>
 		</div>
-		<!------------ Sequences --------------------->
+
-		<div id="action_count" class="var_sync_actions_Action_Count hidden"></div>
-		<div id="Select Options" class="sequence_area"></div>
 		<!------------ Theme Area--------------------->
 		<div class="themerow" id="themerow">
 			<div class="tabrow nomenu_icon">