From 5051cecb845d1def270c80485342910c6664c7f3 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Mon, 23 Dec 2024 10:28:12 -0500
Subject: [PATCH] ssb: Make the emoji picker behave a little better, still.

---
 apps/ssb.json      |  2 +-
 apps/ssb/emojis.js | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 18f52a8f..affce16d 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&bjAInmZa9aZQEuuYOQ19S+HP8P2o2gJO7T8Cd2bnAsM=.sha256"
+	"previous": "&q/1uGp0jMvsYGW7Gj8E33kf6UFo/uNYDXg3zo1sVKQg=.sha256"
 }
diff --git a/apps/ssb/emojis.js b/apps/ssb/emojis.js
index c0667db5..a4d57f48 100644
--- a/apps/ssb/emojis.js
+++ b/apps/ssb/emojis.js
@@ -37,10 +37,12 @@ export async function picker(callback, anchor, author) {
 	div.style.color = '#000';
 	div.style.background = '#fff';
 	div.style.border = '1px solid #000';
-	div.style.display = 'block';
+	div.style.display = 'flex';
 	div.style.overflow = 'scroll';
 	div.style.fontWeight = 'bold';
 	div.style.fontSize = 'xx-large';
+	div.style.flex = '1 1';
+	div.style.flexDirection = 'column';
 	let input = document.createElement('input');
 	input.type = 'text';
 	input.style.display = 'block';
@@ -50,6 +52,7 @@ export async function picker(callback, anchor, author) {
 	input.style.position = 'relative';
 	div.appendChild(input);
 	let list = document.createElement('div');
+	list.style.overflow = 'scroll';
 	div.appendChild(list);
 	div.addEventListener('mousedown', function (event) {
 		event.stopPropagation();
@@ -153,16 +156,16 @@ export async function picker(callback, anchor, author) {
 			${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">
+			<div class="w3-modal-content w3-card-4">
+				<div class="w3-content w3-theme-d1" style="display: flex; flex-direction: column; max-height: 50vh">
+					<header class="w3-container" style="flex: 0 0">
 						<h1>Choose a Reaction</h1>
 						<span class="w3-button w3-display-topright" @click=${cleanup}
 							>&times;</span
 						>
 					</header>
 					${div}
-					<footer class="w3-container w3-padding">
+					<footer class="w3-container w3-padding" style="flex: 0 0">
 						<button class="w3-button" @click=${cleanup}>Close</button>
 					</footer>
 				</div>