improve layout of badge unlock popup

client/Terminal-00-Multiuser.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         MultiProbe
 // @namespace    https://*.angusnicneven.com/*
-// @version      20241012.0
+// @version      20241013.0
 // @description  Probe with friends!
 // @author       tgpholly
 // @match        https://*.angusnicneven.com/*
@@ -55,7 +55,7 @@ console.log("[MP] MultiProbe init");
 	'use strict';
 
 	// Make sure to change the userscript version too!!!!!!!!!!
-	const USERSCRIPT_VERSION_RAW = "20241012.0";
+	const USERSCRIPT_VERSION_RAW = "20241013.0";
 	const USERSCRIPT_VERSION = parseInt(USERSCRIPT_VERSION_RAW.replace(".", ""));
 
 	if (!continueRunningScript) {
@@ -284,54 +284,59 @@ kbd {
 
 @keyframes badgepop {
 	0% {
-		top: -4rem;
+		transform: translate(-50%, -125%);
 	}
 
 	100% {
-		top: 0rem;
+		transform: translate(-50%, 0%);
 	}
 }
 
 @keyframes badgepopout {
 	0% {
-		top: 0rem;
+		transform: translate(-50%, 0%);
 	}
 
 	100% {
-		top: -4rem;
+		transform: translate(-50%, -125%);
 	}
 }
 
 .badgepopout {
-	top: -4rem;
+	transform: translate(-50%, -125%);
+	visibility: visible!important;
 	animation: badgepopout .35s ease-in-out  !important;
 }
 
 .badgepopin {
-	top: 0rem;
+	transform: translate(-50%, 0%);
+	visibility: visible!important;
 	animation: badgepop .35s ease-in-out !important;
 	animation-iteration-count: 1;
 }
 
 .badgepopcreate {
-	top: -4rem;
+	transform: translate(-50%, -125%);
 }
 
 .badgepop {
 	position: absolute;
 	margin-top: .5rem;
-	width: 15rem;
+	visibility: hidden;
+	width: calc(15.0rem + 4vw);
 	background-color: black;
-
 	text-align: start!important;
-
 	padding: .5rem;
-
 	border: 1px solid white;
+	pointer-events: none;
+}
+
+.badgepop mp_col_auto {
+	padding-right: 0;
 }
 
 .badgepop mp_text {
-	font-size: 8px;
+	font-size: calc(0.5rem + 0.1vw);
 	color: white;
 	padding: 0;
 	margin: 0;
@@ -346,6 +351,32 @@ mp_container {
 	display: block;
 }
 
+mp_row {
+	display: flex;
+	flex-wrap: wrap;
+	margin-top: calc(-1 * 0);
+	margin-right: calc(-0.5 * 1.5rem);
+	margin-left: calc(-0.5 * 1.5rem);
+}
+
+mp_row > * {
+	flex-shrink: 0;
+	width: 100%;
+	max-width: 100%;
+	padding-right: calc(1.5rem * 0.5);
+	padding-left: calc(1.5rem * 0.5);
+	margin-top: 0;
+}
+
+mp_col {
+	flex: 1 0 0%;
+}
+
+mp_col_auto {
+	flex: 0 0 auto;
+	width: auto;
+}
+
 .badgepop * {
 	text-align: unset!important;
 	text-shadow: none!important;
@@ -476,10 +507,6 @@ mp_button {
 		buttonBox.classList.add("buttons");
 		user.appendChild(buttonBox);
 
-		/*const followButton = document.createElement("mp_button");
-		followButton.innerText = "F";
-		buttonBox.appendChild(followButton);*/
-
 		const gotoButton = document.createElement("mp_button");
 		gotoButton.innerText = "Go To";
 		const gotoLoc = location;
@@ -981,7 +1008,6 @@ mp_button {
 				}
 			} else {
 				localStorage["mpconnectonload"] = true;
-				//doConnect(localStorage["mpapikey"]);
 			}
 			disconnectButton.innerText = localStorage["mpconnectonload"] === "true" ? "Disconnect" : "Connect";
 
@@ -1112,7 +1138,12 @@ mp_button {
 		const popup = document.createElement("mp_badge");
 		popup.classList.add("badgepop");
 		popup.classList.add("badgepopcreate");
-		popup.style = "transform:translateX(-50%)";
+		
+		const baseRow = document.createElement("mp_row");
+		popup.appendChild(baseRow);
+
+		const imageCol = document.createElement("mp_col_auto");
+		baseRow.appendChild(imageCol);
 
 		const badgeImage = new Image(32, 32);
 		badgeImage.src = image;
@@ -1122,17 +1153,18 @@ mp_button {
 			popup.classList.add("badgepopin");
 			setTimeout(() => popupSound.play(), 100);
 		};
-		popup.appendChild(badgeImage);
+		imageCol.appendChild(badgeImage);
+
+		const textRowCol = document.createElement("mp_col");
+		baseRow.appendChild(textRowCol);
 
 		const badgeTitle = document.createElement("mp_text");
 		badgeTitle.innerHTML = `<b>${title}</b>`;
-		badgeTitle.style = "position:absolute;top:.5rem;left:calc(1rem + 32px)";
+		textRowCol.appendChild(badgeTitle);
-		popup.appendChild(badgeTitle);
 
 		const badgeDescription = document.createElement("mp_text");
-		badgeDescription.innerHTML = description;
+		badgeDescription.innerHTML = description.replaceAll("\r", "").replaceAll("\n", "<br>");
-		badgeDescription.style = "position:absolute;top:1.1rem;left:calc(1rem + 32px)";
+		textRowCol.appendChild(badgeDescription);
-		popup.appendChild(badgeDescription);
 
 		popupRoot.appendChild(popup);