ssb: Work in progress trying to get the emoji picker in line with some of the other modal dialogs.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&k7Wg0DJDUwCnJewRYVmuqF6hL7GEHJzVZic2KO4Z7BQ=.sha256"
+	"previous": "&bjAInmZa9aZQEuuYOQ19S+HP8P2o2gJO7T8Cd2bnAsM=.sha256"
 }

apps/ssb/emojis.js

@@ -142,21 +142,34 @@ export async function picker(callback, anchor, author) {
 	}
 	refresh();
 	input.oninput = refresh;
-	let modal = html`
-		<style>
-			${styles}
-		</style>
-		<div class="w3-modal" style="display: block">
-			<div class="w3-modal-content w3-card-4">${div}</div>
-		</div>
-	`;
 	let parent = document.createElement('div');
-	document.body.appendChild(parent);
 	function cleanup() {
 		parent.parentElement.removeChild(parent);
 		window.removeEventListener('keydown', key_down);
 		document.body.removeEventListener('mousedown', cleanup);
 	}
+	let modal = html`
+		<style>
+			${styles}
+		</style>
+		<div class="w3-modal" style="display: block; box-sizing: border-box; z-index: 10">
+			<div class="w3-modal-content w3-card-4" style="max-height: 50%">
+				<div class="w3-content w3-theme-d1">
+					<header class="w3-container">
+						<h1>Choose a Reaction</h1>
+						<span class="w3-button w3-display-topright" @click=${cleanup}
+							>&times;</span
+						>
+					</header>
+					${div}
+					<footer class="w3-container w3-padding">
+						<button class="w3-button" @click=${cleanup}>Close</button>
+					</footer>
+				</div>
+			</div>
+		</div>
+	`;
+	document.body.appendChild(parent);
 	render(modal, parent);
 	input.focus();
 	document.body.addEventListener('mousedown', cleanup);

apps/ssb/tf-reactions-modal.js

@@ -26,7 +26,7 @@ class TfReactionsModalElement extends LitElement {
 		return this.votes?.length
 			? html` <div
 					class="w3-modal w3-animate-opacity"
-					style="display: block; box-sizing: border-box"
+					style="display: block; box-sizing: border-box; z-index: 10"
 					@click=${this.clear}
 				>
 					<div