ssb: Layout the message expand/collapse buttons better.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&D/qe/rryIyx9bNbsyuNvsYJt1H7b28iWxR65Ql2lF5Q=.sha256"
+	"previous": "&mHXzUyx8vCpgyzOdGjGQlL1qrbsoc32knUR066aIzTM=.sha256"
 }

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
+				return html`
-					class="w3-button w3-theme-d1"
+					<button
-					@click=${() => self.set_expanded(true)}
+						class="w3-button w3-theme-d1 w3-block w3-bar"
-				>
+						style="box-sizing: border-box"
-					+ ${this.total_child_messages(this.message) + ' More'}
+						@click=${() => self.set_expanded(true)}
-				</button>`;
-			} else {
-				return html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => self.set_expanded(false)}
 					>
-						Collapse</button
+						+ ${this.total_child_messages(this.message) + ' More'}
-					>${repeat(
+					</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>
 		`;
 	}