From 05c7d963c23a32d0379e30f61fe0c8e7fe34af8e Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Tue, 22 Sep 2026 18:51:59 +0000
Subject: [PATCH] Wrap long words and links so a chat bubble cannot overflow
 the screen (#622)

---
 src/app/components/Content.svelte               | 2 +-
 src/app/components/ContentLinkBlock.svelte      | 2 +-
 src/app/components/ContentLinkBlockAudio.svelte | 2 +-
 src/app/components/ContentLinkBlockImage.svelte | 2 +-
 src/app/components/ContentLinkInline.svelte     | 4 ++--
 src/lib/components/base.css                     | 5 +++++
 6 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/components/Content.svelte b/src/app/components/Content.svelte
index 08363be5..b6e2e41f 100644
--- a/src/app/components/Content.svelte
+++ b/src/app/components/Content.svelte
@@ -178,7 +178,7 @@
     </Card>
   {:else}
     <div
-      class="overflow-hidden text-ellipsis wrap-break-word"
+      class="overflow-hidden text-ellipsis wrap-anywhere"
       style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
       {#each shortContent as parsed, i (i)}
         {#if isCommand(parsed)}
diff --git a/src/app/components/ContentLinkBlock.svelte b/src/app/components/ContentLinkBlock.svelte
index 09c6c8b3..4958a9c8 100644
--- a/src/app/components/ContentLinkBlock.svelte
+++ b/src/app/components/ContentLinkBlock.svelte
@@ -130,6 +130,6 @@
       </div>
     </Link>
   {:catch}
-    <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
+    <ContentLinkUrl {url} class="link-content link-content--wrap" />
   {/await}
 {/if}
diff --git a/src/app/components/ContentLinkBlockAudio.svelte b/src/app/components/ContentLinkBlockAudio.svelte
index f34d11a9..f84db095 100644
--- a/src/app/components/ContentLinkBlockAudio.svelte
+++ b/src/app/components/ContentLinkBlockAudio.svelte
@@ -46,7 +46,7 @@
 </script>
 
 {#if failed}
-  <a href={url} class="link-content whitespace-nowrap">{displayUrl(url)}</a>
+  <a href={url} class="link-content link-content--wrap">{displayUrl(url)}</a>
 {:else if source}
   <audio controls src={source} preload="metadata" class="my-2 w-full max-w-xl" onerror={onError}
   ></audio>
diff --git a/src/app/components/ContentLinkBlockImage.svelte b/src/app/components/ContentLinkBlockImage.svelte
index b1834d69..75124d86 100644
--- a/src/app/components/ContentLinkBlockImage.svelte
+++ b/src/app/components/ContentLinkBlockImage.svelte
@@ -71,7 +71,7 @@
 </script>
 
 {#if hasError}
-  <a href={url} class="link-content whitespace-nowrap">
+  <a href={url} class="link-content link-content--wrap">
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
diff --git a/src/app/components/ContentLinkInline.svelte b/src/app/components/ContentLinkInline.svelte
index f1b21caf..aeab3825 100644
--- a/src/app/components/ContentLinkInline.svelte
+++ b/src/app/components/ContentLinkInline.svelte
@@ -21,11 +21,11 @@
   <!-- Use a real link so people can copy the href -->
   <a
     href={url}
-    class="link-content whitespace-nowrap"
+    class="link-content link-content--wrap"
     onclick={stopPropagation(preventDefault(expand))}>
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
 {:else}
-  <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
+  <ContentLinkUrl {url} class="link-content link-content--wrap" />
 {/if}
diff --git a/src/lib/components/base.css b/src/lib/components/base.css
index 9aed69d1..8cad7f9e 100644
--- a/src/lib/components/base.css
+++ b/src/lib/components/base.css
@@ -394,6 +394,11 @@ body.keyboard-open .room {
   border-radius: 3px;
 }
 
+.link-content--wrap {
+  @apply whitespace-normal;
+  overflow-wrap: anywhere;
+}
+
 /* welshman/content */
 .welshman-content a {
   @apply text-primary cursor-pointer underline underline-offset-2;