From 98f170004928e56bd77f39fb4a951a2bb2204f69 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 29 Dec 2024 15:42:12 -0500
Subject: [PATCH] ssb: Fiddling with message card and compose CSS some more.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-compose.js | 42 +++++++++++++++++++++++-------------------
 apps/ssb/tf-message.js | 21 ++++++++++++---------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 847f5224..23cd74bf 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&2aHEnXfmAZgCJxML+RF6j63QIYnI4TR5QvqzCHSitNQ=.sha256"
+	"previous": "&zUbiDsKYgSEnn5g5oDSQ1M5YwGqwHL+3cMO6a6zdCD8=.sha256"
 }
diff --git a/apps/ssb/tf-compose.js b/apps/ssb/tf-compose.js
index c02ba8dc..a386ff9c 100644
--- a/apps/ssb/tf-compose.js
+++ b/apps/ssb/tf-compose.js
@@ -572,13 +572,15 @@ class TfComposeElement extends LitElement {
 				}
 			</style>
 			<div
-				class="w3-card-4 w3-theme-d4 w3-padding-small"
+				class="w3-card-4 w3-theme-d4 w3-padding w3-margin-top w3-margin-bottom"
 				style="box-sizing: border-box"
 			>
-				${this.channel !== undefined
-					? html`<p>To #${this.channel}:</p>`
-					: undefined}
-				${this.render_encrypt()}
+				<header class="w3-container">
+					${this.channel !== undefined
+						? html`<p>To #${this.channel}:</p>`
+						: undefined}
+					${this.render_encrypt()}
+				</header>
 				<div class="w3-container w3-padding-small">
 					<div class="w3-half">
 						<span
@@ -592,26 +594,28 @@ class TfComposeElement extends LitElement {
 							.innerText=${live(draft.text ?? '')}
 						></span>
 					</div>
-					<div class="w3-half w3-padding">
+					<div class="w3-half">
 						${content_warning}
-						<div id="preview"></div>
+						<p id="preview"></p>
 					</div>
 				</div>
 				${Object.values(draft.mentions || {}).map((x) =>
 					self.render_mention(x)
 				)}
-				${this.render_attach_app()} ${this.render_content_warning()}
-				${this.render_new_thread()}
-				<button class="w3-button w3-theme-d1" id="submit" @click=${this.submit}>
-					Submit
-				</button>
-				<button class="w3-button w3-theme-d1" @click=${this.attach}>
-					Attach
-				</button>
-				${this.render_attach_app_button()} ${encrypt}
-				<button class="w3-button w3-theme-d1" @click=${this.discard}>
-					Discard
-				</button>
+				<footer class="w3-container">
+					${this.render_attach_app()} ${this.render_content_warning()}
+					${this.render_new_thread()}
+					<button class="w3-button w3-theme-d1" id="submit" @click=${this.submit}>
+						Submit
+					</button>
+					<button class="w3-button w3-theme-d1" @click=${this.attach}>
+						Attach
+					</button>
+					${this.render_attach_app_button()} ${encrypt}
+					<button class="w3-button w3-theme-d1" @click=${this.discard}>
+						Discard
+					</button>
+				</footer>
 			</div>
 		`;
 		return result;
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 2cdade7d..84e61db8 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -320,6 +320,8 @@ ${JSON.stringify(mention, null, 2)}</pre
 							></tf-message>`
 					)}`;
 			}
+		} else {
+			return undefined;
 		}
 	}
 
@@ -639,7 +641,7 @@ ${JSON.stringify(content, null, 2)}</pre
 							<span>${raw_button}</span>
 						</div>
 						${payload} ${this.render_votes()}
-						<p>
+						<footer class="w3-container">
 							${reply}
 							<button class="w3-button w3-theme-d1" @click=${this.react}>
 								React
@@ -654,8 +656,8 @@ ${JSON.stringify(content, null, 2)}</pre
 										</button>
 									`
 								: undefined}
-						</p>
-						${this.render_children()}
+							${this.render_children()}
+						</footer>
 					</div>
 				`;
 			} else if (content.type === 'issue') {
@@ -696,12 +698,12 @@ ${JSON.stringify(content, null, 2)}</pre
 							<span>${raw_button}</span>
 						</div>
 						${content.text} ${this.render_votes()}
-						<p>
+						<footer class="w3-container">
 							<button class="w3-button w3-theme-d1" @click=${this.react}>
 								React
 							</button>
-						</p>
-						${this.render_children()}
+							${this.render_children()}
+						</footer>
 					</div>
 				`;
 			} else if (content.type === 'blog') {
@@ -792,13 +794,14 @@ ${JSON.stringify(content, null, 2)}</pre
 
 						<div>${body}</div>
 						${this.render_mentions()}
-						<div>
+						${this.render_votes()}
+						<footer class="w3-content">
 							${reply}
 							<button class="w3-button w3-theme-d1" @click=${this.react}>
 								React
 							</button>
-						</div>
-						${this.render_votes()} ${this.render_children()}
+							${this.render_children()}
+						</footer>
 					</div>
 				`;
 			} else if (content.type === 'pub') {