From 53b4cbbf8c5c9f734ce3d88fb1816f7119ad3cc5 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 21 Apr 2024 15:24:23 -0400
Subject: [PATCH] CSS, ugh.

---
 apps/ssb.json                  |  2 +-
 apps/ssb/tf-reactions-modal.js | 33 +++++++++++++++++++--------------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index d160eff7..07c4744b 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🐌",
-	"previous": "&VsajulCFc9qmOy/hTlOD3q4ilEz3MP2a31u6DRnz4aA=.sha256"
+	"previous": "&ZzbNtP8BDZn8NVjZEdmzD+D9cqZRUSEDg40zm7JQZ6o=.sha256"
 }
diff --git a/apps/ssb/tf-reactions-modal.js b/apps/ssb/tf-reactions-modal.js
index 357787f2..ffd6b299 100644
--- a/apps/ssb/tf-reactions-modal.js
+++ b/apps/ssb/tf-reactions-modal.js
@@ -24,21 +24,26 @@ class TfReactionsModalElement extends LitElement {
 	render() {
 		let self = this;
 		return this.votes?.length ? html`
-		<div class="w3-modal w3-animate-opacity" style="display: block">
+		<div class="w3-modal w3-animate-opacity" style="display: block; box-sizing: border-box">
 			<div class="w3-modal-content w3-card-4 w3-theme-d1">
-				<header class="w3-container">
-					<h2>Reactions</h2>
-					<span class="w3-button w3-display-topright" @click=${this.clear}>&times;</span>
-				</header>
-				<ul class="w3-theme-dark w3-container w3-ul">
-					${this.votes.map(x => html`
-						<li class="w3-bar">
-							<span class="w3-bar-item">${x?.content?.vote?.expression}</span>
-							<tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user>
-							<span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span>
-						</li>
-					`)}
-				</ul>
+				<div class="w3-container w3-padding">
+					<header class="w3-container">
+						<h2>Reactions</h2>
+						<span class="w3-button w3-display-topright" @click=${this.clear}>&times;</span>
+					</header>
+					<ul class="w3-theme-dark w3-container w3-ul">
+						${this.votes.map(x => html`
+							<li class="w3-bar">
+								<span class="w3-bar-item">${x?.content?.vote?.expression}</span>
+								<tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user>
+								<span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span>
+							</li>
+						`)}
+					</ul>
+					<footer class="w3-container w3-padding">
+						<button class="w3-button" @click=${this.clear}>Close</button>
+					</footer>
+				</div>
 			</div>
 		</div>` : undefined;
 	}