From 9326a1802d377ea1bda8d41c113d8395f50e361c Mon Sep 17 00:00:00 2001
From: nuttylmao <nuttylmao@gmail.com>
Date: Mon, 21 Jul 2025 11:34:46 +1000
Subject: [PATCH] Changed YouTube sticker format + various small fixes

---
 multichat-overlay/index.html | 17 +++--------------
 multichat-overlay/script.js  | 22 +++++++++++-----------
 multichat-overlay/style.css  | 30 ++++++++++++++----------------
 3 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/multichat-overlay/index.html b/multichat-overlay/index.html
index e187769..2412870 100644
--- a/multichat-overlay/index.html
+++ b/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"
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index 54cec04..ad23cdc 100644
--- a/multichat-overlay/script.js
+++ b/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);;
 	}
diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css
index 9f36798..143748c 100644
--- a/multichat-overlay/style.css
+++ b/multichat-overlay/style.css
@@ -126,10 +126,14 @@ li {
 }
 
 .avatar {
-	height: 2em;
-	margin: 1px;
-	transform: translate(0px, 0.25em);
-	border-radius: 50%;
+    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 {