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

Switch from ellipsize to truncate

Browse source
This commit is contained in:
Jon Staab 2026-07-02 14:22:55 -07:00
parent 05954752e2
commit 4cba342a04
22 changed files with 36 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -248,7 +248,7 @@
<Icon icon={ArrowLeft} size={7} />
</Button>
<div class="flex items-center justify-between gap-4">
<div class="ellipsize flex items-center gap-4 whitespace-nowrap">
<div class="truncate min-w-0 flex items-center gap-4 whitespace-nowrap">
<Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
{#if others.length === 0}
<div class="flex gap-2">

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

@ -72,7 +72,7 @@
onclick={preventDefault(clearAndFocus)}>
<Icon icon={AltArrowDown} />
{#if currency}
<span class="text-sm ellipsize whitespace-nowrap">
<span class="min-w-0 truncate text-sm whitespace-nowrap">
{displayCurrency(currency)}
</span>
{:else}

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

@ -63,7 +63,7 @@
{#snippet input()}
<label class="input flex w-full items-center gap-2">
<Icon icon={FileText} />
<input type="text" class="ellipsize min-w-0 grow" value={nevent1} />
<input type="text" class="truncate min-w-0 grow" value={nevent1} />
<Button onclick={copyLink} class="flex items-center">
<Icon icon={Copy} />
</Button>
@ -77,7 +77,7 @@
{#snippet input()}
<label class="input flex w-full items-center gap-2">
<Icon icon={UserCircle} />
<input type="text" class="ellipsize min-w-0 grow" value={npub1} />
<input type="text" class="truncate min-w-0 grow" value={npub1} />
<Button onclick={copyPubkey} class="flex items-center">
<Icon icon={Copy} />
</Button>

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

@ -99,7 +99,7 @@
{/if}
</div>
{#if pin.title}
<strong class="ellipsize pr-8">{pin.title}</strong>
<strong class="truncate min-w-0 pr-8">{pin.title}</strong>
{/if}
{/if}
{#if pin.value[0] === "i"}

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

@ -46,9 +46,9 @@
class="card card-sm card-interactive flex flex-row items-center justify-between gap-3"
onclick={() => selectBoard(board)}>
<span class="flex min-w-0 flex-col">
<strong class="ellipsize">{board.title || "Untitled shelf"}</strong>
<strong class="truncate min-w-0">{board.title || "Untitled shelf"}</strong>
{#if board.description}
<span class="ellipsize text-sm opacity-70">{board.description}</span>
<span class="truncate min-w-0 text-sm opacity-70">{board.description}</span>
{/if}
</span>
<Icon size={4} icon={AltArrowRight} class="shrink-0" />

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

@ -155,7 +155,7 @@
<div
class="w-fit rounded-full border-4 border-surface bg-surface sm:border-surface-more sm:bg-surface-more">
<ProfileCircle pubkey={target} size={16} class="sm:hidden" />
<ProfileCircle pubkey={target} size={20} class="hidden sm:block" />
<ProfileCircle pubkey={target} size={20} class="hidden! sm:block" />
</div>
</div>

6
src/app/components/RelayItem.svelte
View file

@ -17,9 +17,9 @@
<Card sm class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-4">
<div class="ellipsize flex items-center gap-2">
<div class="truncate min-w-0 flex items-center gap-2">
<Icon icon={Server} />
<p class="ellipsize">{displayRelayUrl(url)}</p>
<p class="truncate min-w-0">{displayRelayUrl(url)}</p>
</div>
{@render children?.()}
</div>
@ -28,7 +28,7 @@
{/if}
<span class="flex items-center gap-1 whitespace-nowrap text-sm">
{#if $relay?.contact}
<Link external class="ellipsize underline" href={$relay.contact}
<Link external class="truncate min-w-0 underline" href={$relay.contact}
>{displayUrl($relay.contact)}</Link>
&bull;
{/if}

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

@ -36,7 +36,7 @@
{/if}
</div>
<div class="min-w-0">
<RelayName {url} class="ellipsize whitespace-nowrap text-lg sm:text-xl" />
<RelayName {url} class="truncate whitespace-nowrap text-lg sm:text-xl" />
<p class="text-xs sm:text-sm opacity-75">{url}</p>
</div>
</div>

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

@ -12,6 +12,6 @@
const room = deriveRoom(url, h)
</script>
<span class="ellipsize min-w-0 {props.class}">
<span class="truncate min-w-0 {props.class}">
{$room?.name || h}
</span>

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

@ -144,7 +144,7 @@
onclick={openMenu}>
<div class="flex items-center justify-between">
<strong class="flex items-center gap-1 relative">
<RelayName {url} class="ellipsize" />
<RelayName {url} class="truncate min-w-0" />
<div
class="absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary text-primary-content transition-all opacity-0"
class:opacity-100={$userIsAdmin && $actionItems.length > 0}>

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

@ -27,12 +27,12 @@
<tr
class="cursor-pointer transition-colors hover:bg-surface-less text-sm border-b border-solid border-line"
onclick={goToThread}>
<td class="px-4 py-3 align-top ellipsize">
<td class="px-4 py-3 align-top truncate">
{title || "Untitled thread"}
</td>
<td class="px-4 py-3 align-middle flex items-center gap-2">
<ProfileCircle pubkey={event.pubkey} {url} size={5} />
<span class="ellipsize">
<span class="truncate min-w-0">
<ProfileName pubkey={event.pubkey} {url} />
</span>
</td>

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

@ -52,11 +52,11 @@
<ProfileCircle pubkey={event.pubkey} {url} size={10} class="md:size-14" />
</Button>
<div class="flex min-w-0 flex-col gap-1 md:items-center">
<Button onclick={openProfile} class="text-bold ellipsize text-sm">
<Button onclick={openProfile} class="text-bold truncate min-w-0 text-sm">
{$profileDisplay}
</Button>
{#if $handle}
<span class="ellipsize text-xs opacity-75">{displayHandle($handle)}</span>
<span class="truncate min-w-0 text-xs opacity-75">{displayHandle($handle)}</span>
{/if}
{#if isOp}
<Badge variant="primary">OP</Badge>

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

@ -97,7 +97,7 @@
style={$isParticipantSpeaking(p) ? "--tw-ring-color: var(--success)" : undefined}>
<ProfileCircle pubkey={p.pubkey} size={5} class="h-5 w-5" />
</div>
<span class="ellipsize min-w-0 flex-1 text-xs opacity-70">
<span class="truncate min-w-0 flex-1 text-xs opacity-70">
{p.pubkey ? displayProfileByPubkey(p.pubkey) : "Unknown"}
</span>
<VoiceParticipantMediaBadges

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

@ -78,7 +78,7 @@
<ModalSubtitle>
<span class="inline-flex flex-wrap items-center justify-center gap-x-1.5 gap-y-1">
<Icon icon={Volume} size={4} class="shrink-0" />
<span class="ellipsize min-w-0">{displayRoom(url, h)}</span>
<span class="truncate min-w-0">{displayRoom(url, h)}</span>
<span>·</span>
<span>{spaceLabel}</span>
</span>

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

@ -140,7 +140,7 @@
{:else}
<span class="text-sm font-semibold text-content-muted">Disconnected</span>
{/if}
<span class="ellipsize text-xs text-content-muted">
<span class="truncate min-w-0 text-xs text-content-muted">
{roomName} / {spaceName}
</span>
</div>

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

@ -132,7 +132,7 @@
</p>
</div>
<label class="input flex w-full items-center justify-between gap-2">
<input readonly class="ellipsize grow" value={invoice} />
<input readonly class="truncate min-w-0 grow" value={invoice} />
<Button class="flex items-center" onclick={copyInvoice}>
<Icon icon={Copy} />
</Button>

2
src/routes/settings/+layout.svelte
View file

@ -33,7 +33,7 @@
<SecondaryNav>
<SecondaryNavSection>
<SecondaryNavItem class="w-full justify-between!">
<strong class="ellipsize flex items-center gap-3"> Your Settings </strong>
<strong class="truncate min-w-0 flex items-center gap-3"> Your Settings </strong>
</SecondaryNavItem>
<SecondaryNavItem href="/settings/profile">
<Icon icon={UserCircle} /> Profile

2
src/routes/settings/profile/+page.svelte
View file

@ -133,7 +133,7 @@
<label class="input flex w-full items-center justify-between gap-2">
<div class="flex gap-2 grow items-center">
<Icon icon={LinkRound} />
<input readonly class="ellipsize grow" value={npub} />
<input readonly class="truncate min-w-0 grow" value={npub} />
</div>
<Button class="flex items-center" onclick={copyNpub}>
<Icon icon={Copy} />

2
src/routes/spaces/+page.svelte
View file

@ -196,7 +196,7 @@
<Page>
<PageBar>
<div class="flex items-center justify-between gap-4" in:fly>
<div class="ellipsize flex items-center gap-2 whitespace-nowrap">
<div class="truncate min-w-0 flex items-center gap-2 whitespace-nowrap">
<Icon icon={Widget} size={6} />
<strong>Spaces</strong>
</div>

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

@ -42,10 +42,10 @@
<RelayIcon {url} size={14} class="rounded-full" />
</div>
<div class="flex min-w-0 flex-col">
<h1 class="ellipsize whitespace-nowrap">
<h1 class="truncate min-w-0 whitespace-nowrap">
<RelayName {url} class="text-xl sm:text-2xl font-bold" />
</h1>
<p class="ellipsize text-sm text-primary">{displayRelayUrl(url)}</p>
<p class="truncate min-w-0 text-sm text-primary">{displayRelayUrl(url)}</p>
</div>
</div>
<RelayDescription {url} />
@ -70,37 +70,37 @@
<div class="flex flex-wrap gap-1">
{#if pubkey}
<div class="badge badge-neutral text-wrap h-auto">
<span class="ellipsize">Administrator: <ProfileLink unstyled {pubkey} /></span>
<span class="truncate">Administrator: <ProfileLink unstyled {pubkey} /></span>
</div>
{/if}
{#if $relay?.contact}
<div class="badge badge-neutral text-wrap h-auto">
<span class="ellipsize">Contact: {$relay.contact}</span>
<span class="truncate">Contact: {$relay.contact}</span>
</div>
{/if}
{#if software}
<div class="badge badge-neutral text-wrap h-auto">
<span class="ellipsize">Software: {software}</span>
<span class="truncate">Software: {software}</span>
</div>
{/if}
{#if version}
<div class="badge badge-neutral text-wrap h-auto">
<span class="ellipsize">Version: {version}</span>
<span class="truncate">Version: {version}</span>
</div>
{/if}
{#if limitation?.auth_required}
<p class="badge badge-warning">
<span class="ellipsize">Auth Required</span>
<span class="truncate">Auth Required</span>
</p>
{/if}
{#if limitation?.payment_required}
<p class="badge badge-warning">
<span class="ellipsize">Payment Required</span>
<span class="truncate">Payment Required</span>
</p>
{/if}
{#if limitation?.min_pow_difficulty}
<p class="badge badge-warning text-wrap h-auto">
<span class="ellipsize">Min PoW: {limitation?.min_pow_difficulty}</span>
<span class="truncate">Min PoW: {limitation?.min_pow_difficulty}</span>
</p>
{/if}
</div>

2
src/routes/spaces/[relay]/library/[address]/+page.svelte
View file

@ -95,7 +95,7 @@
<SpaceBar {back}>
{#snippet title()}
<h1 class="ellipsize text-xl">{$board?.title || "Shelf"}</h1>
<h1 class="truncate text-xl">{$board?.title || "Shelf"}</h1>
{/snippet}
{#snippet action()}
{#if canManage}

2
src/routes/spaces/[relay]/threads/[id]/+page.svelte
View file

@ -150,7 +150,7 @@
<SpaceBar {back} class="!h-auto min-h-20 py-3">
{#snippet title()}
<div class="flex min-w-0 flex-col gap-0.5">
<h1 class="ellipsize font-bold sm:text-xl">
<h1 class="truncate min-w-0 font-bold sm:text-xl">
{getTagValue("title", $event?.tags || []) || ""}
</h1>
<p class="text-xs opacity-75">