ssb: Fight blog post CSS a bit more.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&QdW1N8dMttww41AFP9qNRor9P9Rsiamnl/YQSJiviQE=.sha256"
+	"previous": "&g0o5rMFQcyi3GwyWGrSQcQPPABae0yrUpVehztef3XE=.sha256"
 }

apps/ssb/tf-message.js

@@ -999,15 +999,13 @@ class TfMessageElement extends LitElement {
 				`);
 			} else if (content.type === 'blog') {
 				let self = this;
-				tfrpc.rpc.get_blob(content.blog).then(function (data) {
+				self.blog_data = tfrpc.rpc.get_blob(content.blog).then(function (data) {
-					self.blog_data = data;
+					return data
+						? unsafeHTML(tfutils.markdown(data))
+						: html`Blog post content unavailable.`;
 				});
 				let payload = this.expanded[(this.message.id || '') + ':blog']
-					? html`<div>
+					? until(this.blog_data, 'Loading...')
-							${this.blog_data
-								? unsafeHTML(tfutils.markdown(this.blog_data))
-								: 'Loading...'}
-						</div>`
 					: undefined;
 				let body;
 				switch (this.format) {
@@ -1020,7 +1018,7 @@ class TfMessageElement extends LitElement {
 					case 'message':
 						body = html`
 							<div
-								class="w3-border w3-theme-d4 w3-round"
+								class="w3-border w3-theme-l4 w3-round-xlarge"
 								style="padding: 8px; margin: 4px; cursor: pointer"
 								@click=${(x) => self.toggle_expanded(':blog')}
 							>
@@ -1031,8 +1029,13 @@ class TfMessageElement extends LitElement {
 										: undefined}
 									<span>${content.summary}</span>
 								</div>
+								<p class="w3-small">
+									${this.expanded[(this.message.id || '') + ':blog']
+										? 'Show less'
+										: 'Show more'}
+								</p>
 							</div>
-							${payload}
+							<div class="w3-container">${payload}</div>
 						`;
 						break;
 				}