Wrap long words and links so a chat bubble cannot overflow the screen (#622)

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)}

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}

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>

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>

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}

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;