Changed YouTube sticker format + various small fixes

multichat-overlay/index.html

@@ -40,9 +40,9 @@
 						<span id="colon-separator" style="display: none;">: </span>
 						<br id="line-space">
 					</label>
-					<div id="reply">
-						<span>➥ Replying to <span id="replyUser"></span>: <span id="replyMsg"></span></span>
-					</div>
+					<label id="reply">
+						<div>➥ Replying to <span id="replyUser"></span>: <span id="replyMsg"></span></div>
+					</label>
 					<span id="message"></span>
 				</div>
 			</div>
@@ -65,17 +65,6 @@
 		</div>
 	</template>
 
-	<template id="stickerTemplate">
-		<div id="sticker">
-			<div id="youtubeSuperSticker">
-				<div style="width: 100%; text-align: center;">
-					<img id="stickerImg">
-				</div>
-				<div id="stickerLabel"></div>
-			</div>
-		</div>
-	</template>
-
 	<template id="tiktok-gift-template">
 		<div class="tiktok-gift">
 			<img class="tiktok-gift-avatar"

multichat-overlay/script.js

@@ -535,7 +535,7 @@ async function TwitchChatMessage(data) {
 		const replyUser = data.message.reply.userName;
 		const replyMsg = data.message.reply.msgBody;
 
-		replyDiv.style.display = 'block';
+		replyDiv.style.display = 'inline-block';
 		replyUserDiv.innerText = replyUser;
 		replyMsgDiv.innerText = replyMsg;
 	}
@@ -1376,18 +1376,18 @@ function YouTubeSuperSticker(data) {
 	// Set the card background colors
 	cardDiv.classList.add('youtube');
 
-	const stickerTemplate = document.getElementById('stickerTemplate');
+	avatarDiv.style.width = 'auto';
 
-	// Create a new instance of the template
-	const stickerInstance = stickerTemplate.content.cloneNode(true);
+	// Set the text
+	const user = data.user.name;
+	const amount = data.amount;
+	const stickerURL = FindFirstImageUrl(data);
+	const stickerImage = `<img src="${stickerURL}" class="youtube-super-sticker"/>`;
 
-	// Render sticker
-	stickerInstance.querySelector("#stickerImg").src = FindFirstImageUrl(data);
-	stickerInstance.querySelector("#stickerLabel").innerText = `${data.user.name} sent a Super Sticker (${data.amount})`;
+	avatarDiv.innerHTML = stickerImage;
+	titleDiv.innerHTML = `${user} sent a Super Sticker (${amount})`;
 
-	contentDiv.appendChild(stickerInstance);
-
-	AddMessageItem(instance, data.eventId);
+	AddMessageItem(instance);
 }
 
 function YouTubeNewSponsor(data) {
@@ -2104,7 +2104,7 @@ async function KickChatMessage(data) {
 		const replyUser = data.metadata.original_sender.username;
 		const replyMsg = data.metadata.original_message.content;
 
-		replyDiv.style.display = 'block';
+		replyDiv.style.display = 'inline-block';
 		replyUserDiv.innerText = replyUser;
 		replyMsgDiv.innerHTML = replaceEmotes(replyMsg);;
 	}

multichat-overlay/style.css

@@ -126,10 +126,14 @@ li {
 }
 
 .avatar {
+    width: 2em;                /* Set width equal to height */
     height: 2em;
     margin: 1px;
     transform: translate(0px, 0.25em);
     border-radius: 50%;
+    object-fit: cover;         /* Crop to fill the circle */
+    overflow: hidden;          /* Ensure no overflow outside the circle */
+    display: inline-block;     /* Just in case */
 }
 
 .timestamp,
@@ -196,8 +200,9 @@ li {
 #reply {
 	display: none;
 	overflow: hidden;
-	white-space: nowrap;
+	white-space: normal; /* Allow line wrapping */
 	text-overflow: ellipsis;
+	word-break: break-word; /* Break long words if necessary */
 	font-size: 0.7em;
 	opacity: 0.5;
 }
@@ -213,17 +218,10 @@ li {
 	border-radius: var(--border-radius);
 }
 
-#youtubeSuperSticker {
-	display: block;
-}
-
-#sticker-img {
-	height: 5em;
-}
-
-#stickerLabel {
-	text-align: center;
-	font-weight: 700;
+.youtube-super-sticker {
+	height: 2em;
+	margin: 1px;
+	transform: translate(0px, 0.25em);
 }
 
 .tiktok-gift {