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

Ellipsize badge content instead of overflowing the container (#400)

Browse source 
Reviewed-on: https://gitea.coracle.social/coracle/flotilla/pulls/400
Co-authored-by: Coracle-Bot <npub1klq6260@nostr.local>
This commit is contained in:
Coracle-Bot 2026-09-02 15:13:22 +00:00 committed by hodlbod
parent a56755f8f7
commit 133cd1bba2
4 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -100,7 +100,7 @@
<div class="flex flex-wrap gap-2">
{#each seenOn as url, i (url)}
<Badge class="bg-surface flex gap-1">
{displayRelayUrl(url)}
<span>{displayRelayUrl(url)}</span>
</Badge>
{/each}
</div>

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

@ -106,7 +106,7 @@
<div class="flex flex-wrap gap-2">
{#each seenOn as seenUrl (seenUrl)}
<Badge class="bg-surface flex gap-1">
{displayRelayUrl(seenUrl)}
<span>{displayRelayUrl(seenUrl)}</span>
</Badge>
{/each}
</div>

9
src/lib/components/badge.css
View file

@ -1,6 +1,13 @@
@layer components {
.badge {
@apply inline-flex items-center gap-1 rounded-full border-2 border-solid border-transparent px-2 py-1 text-sm font-semibold whitespace-nowrap;
@apply inline-flex max-w-full min-w-0 items-center gap-1 overflow-hidden rounded-full border-2 border-solid border-transparent px-2 py-1 text-sm font-semibold whitespace-nowrap;
/* text-overflow doesn't reach a flex container's anonymous items, so the
ellipsis has to live on an element child; overflow-hidden above is the
backstop for badges whose content is a bare text node. */
& > * {
@apply min-w-0 truncate;
}
&.badge-sm {
@apply h-6 text-xs;

24
src/routes/spaces/[relay]/about/+page.svelte
View file

@ -61,38 +61,38 @@
{@const {pubkey, software, version, limitation} = $relay}
<div class="flex flex-wrap gap-1">
{#if pubkey}
<div class="badge badge-neutral text-wrap h-auto">
<span class="truncate">Administrator: <ProfileLink unstyled {pubkey} /></span>
<div class="badge badge-neutral">
<span>Administrator: <ProfileLink unstyled {pubkey} /></span>
</div>
{/if}
{#if $relay?.contact}
<div class="badge badge-neutral text-wrap h-auto">
<span class="truncate">Contact: {$relay.contact}</span>
<div class="badge badge-neutral">
<span>Contact: {$relay.contact}</span>
</div>
{/if}
{#if software}
<div class="badge badge-neutral text-wrap h-auto">
<span class="truncate">Software: {software}</span>
<div class="badge badge-neutral">
<span>Software: {software}</span>
</div>
{/if}
{#if version}
<div class="badge badge-neutral text-wrap h-auto">
<span class="truncate">Version: {version}</span>
<div class="badge badge-neutral">
<span>Version: {version}</span>
</div>
{/if}
{#if limitation?.auth_required}
<p class="badge badge-warning">
<span class="truncate">Auth Required</span>
<span>Auth Required</span>
</p>
{/if}
{#if limitation?.payment_required}
<p class="badge badge-warning">
<span class="truncate">Payment Required</span>
<span>Payment Required</span>
</p>
{/if}
{#if limitation?.min_pow_difficulty}
<p class="badge badge-warning text-wrap h-auto">
<span class="truncate">Min PoW: {limitation?.min_pow_difficulty}</span>
<p class="badge badge-warning">
<span>Min PoW: {limitation?.min_pow_difficulty}</span>
</p>
{/if}
</div>