From 0c394c2e6106600f429ca6c74d19f0ccd32bde6f Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Mon, 30 Dec 2024 07:13:49 -0500
Subject: [PATCH] ssb: Trying to keep things CSS-ing off the screen.

---
 apps/ssb.json          |  2 +-
 apps/ssb/tf-message.js | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index ce586a01..5bdecd9d 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&vLj0HMWc/ArlfAO112c0+JfXdszqkZxFIazUO6BaQEQ=.sha256"
+	"previous": "&arQAUZPC4NbeW6hF1sfEH7DUvycOiHG1zJyLhtuGOkA=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 84e61db8..d5c2afd9 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -426,7 +426,7 @@ ${JSON.stringify(mention, null, 2)}</pre
 			return html`
 				<div
 					class="w3-card-4 ${class_background} w3-border-theme"
-					style="margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"
+					style="margin-top: 8px; padding: 16px; display: inline-block; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
 				>
 					<tf-user id=${self.message.author} .users=${self.users}></tf-user>
 					<span style="padding-right: 8px"
@@ -456,7 +456,7 @@ ${JSON.stringify(mention, null, 2)}</pre
 		if (this.message?.type === 'contact_group') {
 			return html` <div
 				class="w3-card-4 ${class_background} w3-border-theme"
-				style="margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
+				style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
 			>
 				${this.message.messages.map(
 					(x) =>
@@ -474,7 +474,7 @@ ${JSON.stringify(mention, null, 2)}</pre
 		} else if (this.message.placeholder) {
 			return html` <div
 				class="w3-card-4 ${class_background} w3-border-theme"
-				style="margin-top: 8px; padding: 16px; overflow-wrap: anywhere"
+				style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
 			>
 				<a target="_top" href=${'#' + encodeURIComponent(this.message.id)}
 					>${this.message.id}</a
@@ -624,7 +624,7 @@ ${JSON.stringify(content, null, 2)}</pre
 					</style>
 					<div
 						class="w3-card-4 ${class_background} w3-border-theme"
-						style="margin-top: 8px; padding: 16px"
+						style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
 					>
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
@@ -681,7 +681,7 @@ ${JSON.stringify(content, null, 2)}</pre
 					</style>
 					<div
 						class="w3-card-4 ${class_background} w3-border-theme"
-						style="margin-top: 8px; padding: 16px"
+						style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
 					>
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
@@ -776,7 +776,7 @@ ${JSON.stringify(content, null, 2)}</pre
 					</style>
 					<div
 						class="w3-card-4 ${class_background} w3-border-theme"
-						style="margin-top: 8px; padding: 16px"
+						style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
 					>
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>