fix: More resolution fixes and image sizing

Author: prima

klite.embd

@@ -220,19 +220,19 @@ Current version indicated by LITEVER below.
 	}
 	.aesthetic_viewport_height
 	{
-		height: calc(98vh - 160px);
+		height: calc(98vh - 190px);
 	}
 	.aesthetic_viewport_height.withmenu
 	{
-		height: calc(98vh - 198px);
+		height: calc(98vh - 238px);
 	}
 	.aesthetic_viewport_height.withtyping
 	{
-		height: calc(98vh - 210px);
+		height: calc(98vh - 250px);
 	}
 	.aesthetic_viewport_height.withmenu.withtyping
 	{
-		height: calc(98vh - 248px);
+		height: calc(98vh - 288px);
 	}
 
 	/* Top nav menu */
@@ -1909,9 +1909,37 @@ Current version indicated by LITEVER below.
 		padding-left: 8px;
 		padding-right: 8px;
 		transition: transform 0.3s ease;
-		height: calc(100vh - 68px);
 		z-index: 1;
 	}
+	
+	@media (max-width: 700px), (min-width: 1400px) {
+		.aesthetic_viewport_height
+		{
+			height: calc(98vh - 160px);
+		}
+		.aesthetic_viewport_height.withmenu
+		{
+			height: calc(98vh - 198px);
+		}
+		.aesthetic_viewport_height.withtyping
+		{
+			height: calc(98vh - 210px);
+		}
+		.aesthetic_viewport_height.withmenu.withtyping
+		{
+			height: calc(98vh - 248px);
+		}
+
+		.corpoleftpanel, .corporightpanel
+		{
+			height: calc(100vh - 68px);
+		}
+
+		.corpoleftpanelitems
+		{
+			height: calc(100% - 20px);
+		}
+	}
 	body.darkmode .corpoleftpanel
 	{
 		background-color: #161616;
@@ -1939,7 +1967,7 @@ Current version indicated by LITEVER below.
 		flex-direction: column;
 		margin-top: 10px;
 		padding: 2px;
-		height: calc(100% - 20px);
+		height: calc(100% - 60px);
 	}
 	.corpoleftpanelitemsinner
 	{
@@ -2014,7 +2042,7 @@ Current version indicated by LITEVER below.
 	.corporightpanel
 	{
 		width: 100%;
-		height: calc(100vh - 68px);
+		height: calc(100vh - 120px);
 		display: flex;
 		flex-direction: column;
 		padding-left: 2px;
@@ -24267,7 +24295,7 @@ Current version indicated by LITEVER below.
 	function render_aesthetic_ui(input, isPreview) //class suffix string used to prevent defined styles from leaking into global scope
 	{
 		const avatarImage = function(for_ai, source = undefined, name = undefined) { //todo: this is still bad code, but will keep it for now
-			if((for_ai && !as.AI_portrait) || (!for_ai && !as.you_portrait) || as.border_style == 'None')
+			if(as.border_style == 'None')
 			{
 				return ''; //for no portrait
 			}
@@ -24276,21 +24304,26 @@ Current version indicated by LITEVER below.
 			let width, height;
 			let imgclassname = "";
 			let imageToUse = getImageForSource(source, name);
-			if (imageToUse !== undefined)
+			if (imageToUse === undefined && ((for_ai && !as.AI_portrait) || (!for_ai && !as.you_portrait)))
 			{
-				width = as.portrait_width_AI;
-				height = (as.border_style == 'Circle' ? as.portrait_width_AI : as.portrait_width_AI / as.portrait_ratio_AI);
+				return "";
 			}
 			else if (!for_ai) 
 			{
 				width = as.portrait_width_you;
 				height = (as.border_style == 'Circle' ? as.portrait_width_you : as.portrait_width_you / as.portrait_ratio_you);
-				imgclassname = "you-portrait-image";
+				if (imageToUse === undefined)
+				{
+					imgclassname = "you-portrait-image";
+				}
 			}
 			else {
 				width = as.portrait_width_AI;
 				height = (as.border_style == 'Circle' ? as.portrait_width_AI : as.portrait_width_AI / as.portrait_ratio_AI);
-				imgclassname = "AI-portrait-image";
+				if (imageToUse === undefined)
+				{
+					imgclassname = "AI-portrait-image";
+				}
 			}
 			return `<div class='${imgclassname}${classSuffixStr}${reinvertcolor} containAndScaleImage' style='width:${width}px; height:${height}px; border-radius: ${radius}; ${!!imageToUse ? `background-image:${imageToUse}; margin: 10px 6px; border:none;` : ""}'></div>`;
 		}
@@ -36950,7 +36983,7 @@ flowchart TD\n${treeToViewOutput.outputText.trim()}`
 	.workerpopup, .scenariopopup, #settingscontainerfg {
 		margin-top: unset;
 	}
-
+	
 	@media (min-width: 600px) {
 		#wilist:not(.sidepanelsize) {
 			max-height: calc(90% - 70px)