Fixed up some of the slide animations

horizontal-chat/index.html

@@ -14,8 +14,8 @@
 		</ul>
 		<div id="alertBox"></div>
 		<div id="background"></div>
-		<div id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">			
-		</div>
+		<ul id="IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList">			
+		</ul>
 	</div>
 
 	</div>

horizontal-chat/script.js

@@ -1061,11 +1061,13 @@ async function GetPronouns(platform, username) {
 function AddMessageItem(element, elementID, platform, userId) {
 	// Calculate the height of the div before inserting
 	const tempDiv = document.getElementById('IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList');
-	tempDiv.appendChild(element);
+	const tempDivTwoElectricBoogaloo = document.createElement('div');
+	tempDivTwoElectricBoogaloo.style.display = 'inline';
+	tempDivTwoElectricBoogaloo.appendChild(element);
+	tempDiv.appendChild(tempDivTwoElectricBoogaloo);
 
 	setTimeout(function () {
-		const calculatedWidth = tempDiv.offsetWidth + "px";
-		//console.log(calculatedWidth);
+		const calculatedWidth = tempDivTwoElectricBoogaloo.offsetWidth + "px";
 
 		// Create a new line item to add to the message list later
 		var lineItem = document.createElement('li');
@@ -1074,9 +1076,7 @@ function AddMessageItem(element, elementID, platform, userId) {
 		lineItem.dataset.userId = userId;
 
 		// Move the element from the temp div to the new line item
-		while (tempDiv.firstChild) {
-			lineItem.appendChild(tempDiv.firstChild);
-		}
+		lineItem.appendChild(tempDiv.firstElementChild);
 
 		// Add the line item to the list and animate it
 		// We need to manually set the height as straight CSS can't animate on "height: auto"
@@ -1090,8 +1090,6 @@ function AddMessageItem(element, elementID, platform, userId) {
 		while (messageList.clientWidth > 10 * window.innerWidth) {
 			messageList.removeChild(messageList.firstChild);
 		}
-
-		tempDiv.innerHTML = '';
 		
 		if (hideAfter > 0)
 		{

horizontal-chat/style.css

@@ -5,6 +5,10 @@
 	--border-radius: 20px;
 }
 
+body {
+	overflow: hidden;
+}
+
 html {
 	width: 100vw;
 	height: 100vh;
@@ -57,7 +61,7 @@ html {
 	transform: translateX(50%);
 	overflow: hidden;
 	white-space: nowrap;
-	
+
 	font-weight: 700;
 	line-height: 1.7em;
 	width: 100%;
@@ -80,6 +84,7 @@ html {
 	0% {
 		bottom: calc(-1 * var(--margin) - 1.7em);
 	}
+
 	100% {
 		bottom: 0px;
 	}
@@ -89,6 +94,7 @@ html {
 	0% {
 		bottom: 0px;
 	}
+
 	100% {
 		bottom: calc(-1 * var(--margin) - 1.7em);
 	}
@@ -111,7 +117,7 @@ li {
 }
 
 #IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList {
-    /* margin-top: 10px; */
+	/* margin-top: 10px; */
 	background: #2FB774;
 	display: inline;
 	opacity: 0;