give the name tag an inner p

4 files changed, 37 insertions, 13 deletions

diff --git a/webAO/client.html b/webAO/client.html
index c1ebdca..c56a1d2 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -77,7 +77,9 @@
 				<img id="client_evi" src="" alt="Character Evidence" onerror="imgError(this);">
 				<img id="client_shout" alt="Shout overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
 				<div id="client_chatcontainer">
-					<div id="client_name"></div>
+					<div id="client_name">
+						<p id="client_inner_name"></p>
+					</div>
 					<div id="client_chat">
 						<p id="client_inner_chat"></p>
 						<div id="client_chatwaiting">&#9654;</div>
diff --git a/webAO/client.js b/webAO/client.js
index 121b5fc..0e86aaf 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1554,12 +1554,12 @@ async changeBackground(position) {
 		const pairSprite = document.getElementById("client_pair_char");
 
 		const chatContainerBox = document.getElementById("client_chatcontainer");	
-		const nameBox = document.getElementById("client_name");
+		const nameBoxInner = document.getElementById("client_inner_name");
 		const chatBoxInner = document.getElementById("client_inner_chat");
 
 		//Clear out the last message
 		chatBoxInner.innerText = this.textnow;
-		nameBox.innerText = this.chatmsg.nameplate;		
+		nameBoxInner.innerText = this.chatmsg.nameplate;		
 
 		if (this.lastChar !== this.chatmsg.name) {
 			charSprite.style.display = "none";
@@ -1651,6 +1651,7 @@ async changeBackground(position) {
 		} else {
 			chatbox_theme.href = "styles/chatbox/aa.css";
 		}
+		resizeChatbox();
 
 		// Flip the character
 		if (this.chatmsg.flip === 1) {
@@ -1782,12 +1783,11 @@ async changeBackground(position) {
 					}
 				}
 
+				resizeChatbox();
+
 				const chatContainerBox = document.getElementById("client_chatcontainer");
-				const gameHeight = document.getElementById("client_background").offsetHeight;
 				chatContainerBox.style.display = "block";
 
-				chatContainerBox.style.fontSize = (gameHeight * 0.05) + "px";
-
 				chatBoxInner.className = "text_" + this.colors[this.chatmsg.color];
 
 				this.chatmsg.startspeaking = false;
@@ -2423,6 +2423,17 @@ export function getIndexFromSelect(select_box, value) {
 window.getIndexFromSelect = getIndexFromSelect;
 
 /**
+ * Set the font size for the chatbox
+ */
+export function resizeChatbox() {
+	const chatContainerBox = document.getElementById("client_chatcontainer");
+	const gameHeight = document.getElementById("client_background").offsetHeight;
+                
+	chatContainerBox.style.fontSize = (gameHeight * 0.05) + "px";
+}
+window.resizeChatbox = resizeChatbox;
+
+/**
  * Update evidence icon.
  */
 export function updateEvidenceIcon() {
diff --git a/webAO/styles/chatbox/aa.css b/webAO/styles/chatbox/aa.css
index 3efde89..2d1f530 100644
--- a/webAO/styles/chatbox/aa.css
+++ b/webAO/styles/chatbox/aa.css
@@ -78,10 +78,7 @@
 	left: 0;
 	top: 0;
 	height: 13%;
-	min-width: 3.25em;
-	text-justify: distribute;
-	letter-spacing: 0.075em;
-	font-weight: bold;
+	min-width: 3.25em;	
 	background: rgba(56, 56, 163, 0.5);
 	box-shadow: 0.075em 0.075em rgba(0, 56, 163, 0.5) inset;
 	padding: 0 2%;
@@ -92,6 +89,13 @@
 	z-index: 1;
 }
 
+#client_name p {
+	text-justify: distribute;
+	letter-spacing: 0.075em;
+	margin: 1px;
+	font-weight: bold;
+}
+
 #client_chat {
 	display: block;
 	position: absolute;
diff --git a/webAO/styles/chatbox/yttd.css b/webAO/styles/chatbox/yttd.css
index 28261af..8eddeb0 100644
--- a/webAO/styles/chatbox/yttd.css
+++ b/webAO/styles/chatbox/yttd.css
@@ -48,16 +48,22 @@
 	display: block;
 	top: 0;
 	left: 0;	
+	height: 27%;
+	height: calc(30% - 6px);
 	min-width: 10%;
-	background-color: rgba(0, 0, 0, 0.5);
-	color: #fef9ad;
-	padding: 2% 3%;
+	background-color: rgba(0, 0, 0, 0.5);	
     border-style: double;
     border-color: #ffa500;
 	position: absolute;
 	z-index: 1;
 }
 
+#client_name p{
+	margin: 0;
+	padding: 2% 3%;
+	color: #fef9ad;
+}
+
 #client_chat {
 	display: block;
 	position: absolute;
@@ -66,6 +72,7 @@
 	width: calc(100% - 6px);
 	margin: auto;
 	height: 70%;
+	height: calc(70% - 6px);
 	border-style: double;
     border-color: #ffa500;
 	background-color: rgba(0, 0, 0, 0.5);