From 6c46179be9388996c263c00c78fe83ccd8aee565 Mon Sep 17 00:00:00 2001
From: somebody <onesome01@protonmail.com>
Date: Wed, 12 Oct 2022 15:19:32 -0500
Subject: [PATCH] Fix help icon alignment

---
 static/koboldai.css            | 7 ++++---
 templates/settings flyout.html | 6 ++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index 463fbebf..440044bf 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -2322,9 +2322,10 @@ body {
 }
 
 /* Substitutions */
-#Substitutions > .helpicon {
-	margin-left: 5px;
-	align-self: auto;
+#Substitutions > .help_text > .helpicon {
+	position: relative;
+	margin-left: 1px;
+	top: 2px;
 }
 
 #substitution-header {
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index 15087064..3bbb445c 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -311,9 +311,11 @@
 		</div>
 
 		<div class="setting_tile_area" id="Substitutions">
-			<div class="help_text">Automatically replaces phrases that you or the AI insert.</div>
+			<div class="help_text">
+				Automatically replaces phrases that you or the AI insert.
+				<span class="helpicon material-icons-outlined" tooltip="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span>
+			</div>
 
-			<span class="helpicon material-icons-outlined" tooltip="Can be used to help you insert special characters or automatically correct the AI. The pencil button toggles if a substitution is active or not.">help_icon</span> 
 			<div id="substitution-header" class="noselect">
 				<b>Replace</b> <b>With</b>
 			</div>