From 41cbde934aea36f359bbde8ad8a4ed03c6020ba8 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 13 Apr 2025 21:38:56 -0400
Subject: [PATCH] ssb: Layout the message expand/collapse buttons better.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-message.js | 37 +++++++++++++++++++++++--------------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 9160fa7b9..179f11032 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&D/qe/rryIyx9bNbsyuNvsYJt1H7b28iWxR65Ql2lF5Q=.sha256"
+	"previous": "&mHXzUyx8vCpgyzOdGjGQlL1qrbsoc32knUR066aIzTM=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 91cbb4702..08290d0b2 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -310,19 +310,18 @@ class TfMessageElement extends LitElement {
 		let self = this;
 		if (this.message.child_messages?.length) {
 			if (!this.expanded[this.message.id]) {
-				return html`<button
-					class="w3-button w3-theme-d1"
-					@click=${() => self.set_expanded(true)}
-				>
-					+ ${this.total_child_messages(this.message) + ' More'}
-				</button>`;
-			} else {
-				return html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => self.set_expanded(false)}
+				return html`
+					<button
+						class="w3-button w3-theme-d1 w3-block w3-bar"
+						style="box-sizing: border-box"
+						@click=${() => self.set_expanded(true)}
 					>
-						Collapse</button
-					>${repeat(
+						+ ${this.total_child_messages(this.message) + ' More'}
+					</button>
+					`;
+			} else {
+				return html`
+					${repeat(
 						this.message.child_messages || [],
 						(x) => x.id,
 						(x) =>
@@ -335,7 +334,14 @@ class TfMessageElement extends LitElement {
 								channel=${this.channel}
 								channel_unread=${this.channel_unread}
 							></tf-message>`
-					)}`;
+					)}
+					<button
+						class="w3-button w3-theme-d1 w3-block w3-bar"
+						style="box-sizing: border-box"
+						@click=${() => self.set_expanded(false)}
+					>
+						Collapse</button
+					>`;
 			}
 		} else {
 			return undefined;
@@ -546,8 +552,11 @@ class TfMessageElement extends LitElement {
 				: undefined;
 		return html`
 			<div class="w3-section w3-container">
-				${reply} ${this.render_children()}
+				${reply}
 			</div>
+			<footer>
+				${this.render_children()}
+			</footer>
 		`;
 	}