From cd03ede358511e018ae5a6b599c835f0cc7b2a0d Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 22 Dec 2024 14:45:16 -0500
Subject: [PATCH] ssb: Work in progress trying to get the emoji picker in line
 with some of the other modal dialogs.

---
 apps/ssb.json                  |  2 +-
 apps/ssb/emojis.js             | 31 ++++++++++++++++++++++---------
 apps/ssb/tf-reactions-modal.js |  2 +-
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index abf898b8e..18f52a8f2 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&k7Wg0DJDUwCnJewRYVmuqF6hL7GEHJzVZic2KO4Z7BQ=.sha256"
+	"previous": "&bjAInmZa9aZQEuuYOQ19S+HP8P2o2gJO7T8Cd2bnAsM=.sha256"
 }
diff --git a/apps/ssb/emojis.js b/apps/ssb/emojis.js
index d5ff42e98..c0667db50 100644
--- a/apps/ssb/emojis.js
+++ b/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);
diff --git a/apps/ssb/tf-reactions-modal.js b/apps/ssb/tf-reactions-modal.js
index 565f6071b..84cbfa410 100644
--- a/apps/ssb/tf-reactions-modal.js
+++ b/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