matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Coracle-Bot 2026-09-22 18:51:59 +00:00 committed by hodlbod
parent bcc36cbce4
commit 05c7d963c2
6 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/Content.svelte
View file

@ -178,7 +178,7 @@
</Card> </Card>
{:else} {:else}
<div <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)" : ""}> style={expandBlock ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
{#each shortContent as parsed, i (i)} {#each shortContent as parsed, i (i)}
{#if isCommand(parsed)} {#if isCommand(parsed)}

2
src/app/components/ContentLinkBlock.svelte
View file

@ -130,6 +130,6 @@
</div> </div>
</Link> </Link>
{:catch} {:catch}
<ContentLinkUrl {url} class="link-content whitespace-nowrap" /> <ContentLinkUrl {url} class="link-content link-content--wrap" />
{/await} {/await}
{/if} {/if}

2
src/app/components/ContentLinkBlockAudio.svelte
View file

@ -46,7 +46,7 @@
</script> </script>
{#if failed} {#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} {:else if source}
<audio controls src={source} preload="metadata" class="my-2 w-full max-w-xl" onerror={onError} <audio controls src={source} preload="metadata" class="my-2 w-full max-w-xl" onerror={onError}
></audio> ></audio>

2
src/app/components/ContentLinkBlockImage.svelte
View file

@ -71,7 +71,7 @@
</script> </script>
{#if hasError} {#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" /> <Icon icon={LinkRound} size={3} class="inline-block" />
{displayUrl(url)} {displayUrl(url)}
</a> </a>

4
src/app/components/ContentLinkInline.svelte
View file

@ -21,11 +21,11 @@
<!-- Use a real link so people can copy the href --> <!-- Use a real link so people can copy the href -->
<a <a
href={url} href={url}
class="link-content whitespace-nowrap" class="link-content link-content--wrap"
onclick={stopPropagation(preventDefault(expand))}> onclick={stopPropagation(preventDefault(expand))}>
<Icon icon={LinkRound} size={3} class="inline-block" /> <Icon icon={LinkRound} size={3} class="inline-block" />
{displayUrl(url)} {displayUrl(url)}
</a> </a>
{:else} {:else}
<ContentLinkUrl {url} class="link-content whitespace-nowrap" /> <ContentLinkUrl {url} class="link-content link-content--wrap" />
{/if} {/if}

5
src/lib/components/base.css
View file

@ -394,6 +394,11 @@ body.keyboard-open .room {
border-radius: 3px; border-radius: 3px;
} }
.link-content--wrap {
@apply whitespace-normal;
overflow-wrap: anywhere;
}
/* welshman/content */ /* welshman/content */
.welshman-content a { .welshman-content a {
@apply text-primary cursor-pointer underline underline-offset-2; @apply text-primary cursor-pointer underline underline-offset-2;