From e3d71f77f536c3279cd6cf9428d4fc8a5f132f13 Mon Sep 17 00:00:00 2001
From: nuttylmao <nuttylmao@gmail.com>
Date: Sun, 13 Apr 2025 01:58:54 +1000
Subject: [PATCH] Fixed alignment issues

---
 horizontal-chat/index.html | 24 ++++++++++++------------
 horizontal-chat/script.js  |  4 +++-
 horizontal-chat/style.css  |  1 +
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/horizontal-chat/index.html b/horizontal-chat/index.html
index 9d87171..ad31add 100644
--- a/horizontal-chat/index.html
+++ b/horizontal-chat/index.html
@@ -21,18 +21,18 @@
 	</div>
 
 	<template id="messageTemplate">
-			<div style="display: inline;">
-				<label id="userInfo" style="margin-left: 10px;">
-					<span id="platform"></span>
-					<span id="avatar"></span>
-					<span id="timestamp"></span>
-					<span id="badgeList"></span>
-					<span id="pronouns"></span>
-					<span id="username"></span>
-					<span id="colon-separator">: </span>
-				</label>
-				<span id="message"></span>
-			</div>
+		<div style="display: inline;">
+			<label id="userInfo" style="margin-left: 10px;">
+				<span id="platform"></span>
+				<span id="avatar"></span>
+				<span id="timestamp"></span>
+				<span id="badgeList"></span>
+				<span id="pronouns"></span>
+				<span id="username"></span>
+				<span id="colon-separator">: </span>
+			</label>
+			<span id="message"></span>
+		</div>
 	</template>
 </body>
 
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 389cd99..7cc89be 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -277,7 +277,6 @@ async function TwitchChatMessage(data) {
 	const instance = template.content.cloneNode(true);
 
 	// Get divs
-	const messageContainer = instance.querySelector(".messageContainer");
 	const userInfoDiv = instance.querySelector("#userInfo");
 	const avatarDiv = instance.querySelector("#avatar");
 	const timestampDiv = instance.querySelector("#timestamp");
@@ -1165,6 +1164,7 @@ function ShowAlert(message, background = null, duration = animationDuration) {
 
 	// Get divs
 	const messageListDiv = document.querySelector("#messageList");
+	const backgroundDiv = document.querySelector("#background");
 	const alertBoxDiv = document.querySelector("#alertBox");
 
 	// Set the message text
@@ -1176,11 +1176,13 @@ function ShowAlert(message, background = null, duration = animationDuration) {
 	// Start the animation
 	widgetLocked = true;
 	messageListDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
+	backgroundDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
 	alertBoxDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
 
 	// To stop the animation (remove the animation property):
 	setTimeout(() => {
 		messageListDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
+		backgroundDiv.style.animation = 'showAlertBox 0.5s ease-in-out forwards';
 		alertBoxDiv.style.animation = 'hideAlertBox 0.5s ease-in-out forwards';
 		setTimeout(() => {
 			alertBoxDiv.classList = '';
diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css
index 61ec983..d6b0c28 100644
--- a/horizontal-chat/style.css
+++ b/horizontal-chat/style.css
@@ -47,6 +47,7 @@ html {
 	bottom: 0;
 	right: 0;
 	display: flex;
+	align-items: flex-end;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	text-justify: right;