From 4cba342a04f0de4404fe111d0856285351efd487 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Thu, 2 Jul 2026 14:22:55 -0700
Subject: [PATCH] Switch from ellipsize to truncate

---
 src/app/components/Chat.svelte                 |  2 +-
 src/app/components/CurrencyInput.svelte        |  2 +-
 src/app/components/EventInfo.svelte            |  4 ++--
 src/app/components/Pin.svelte                  |  2 +-
 src/app/components/PinboardSelect.svelte       |  4 ++--
 src/app/components/ProfilePage.svelte          |  2 +-
 src/app/components/RelayItem.svelte            |  6 +++---
 src/app/components/RelaySummary.svelte         |  2 +-
 src/app/components/RoomName.svelte             |  2 +-
 src/app/components/SpaceMenu.svelte            |  2 +-
 src/app/components/ThreadBoardItem.svelte      |  4 ++--
 src/app/components/ThreadPost.svelte           |  4 ++--
 src/app/components/VoiceRoomItem.svelte        |  2 +-
 src/app/components/VoiceRoomJoinDialog.svelte  |  2 +-
 src/app/components/VoiceWidget.svelte          |  2 +-
 src/app/components/ZapInvoice.svelte           |  2 +-
 src/routes/settings/+layout.svelte             |  2 +-
 src/routes/settings/profile/+page.svelte       |  2 +-
 src/routes/spaces/+page.svelte                 |  2 +-
 src/routes/spaces/[relay]/about/+page.svelte   | 18 +++++++++---------
 .../[relay]/library/[address]/+page.svelte     |  2 +-
 .../spaces/[relay]/threads/[id]/+page.svelte   |  2 +-
 22 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/app/components/Chat.svelte b/src/app/components/Chat.svelte
index 1e0d7390..9cadca0a 100644
--- a/src/app/components/Chat.svelte
+++ b/src/app/components/Chat.svelte
@@ -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">
diff --git a/src/app/components/CurrencyInput.svelte b/src/app/components/CurrencyInput.svelte
index 17f411a0..3b716869 100644
--- a/src/app/components/CurrencyInput.svelte
+++ b/src/app/components/CurrencyInput.svelte
@@ -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}
diff --git a/src/app/components/EventInfo.svelte b/src/app/components/EventInfo.svelte
index b204aa5e..bb716722 100644
--- a/src/app/components/EventInfo.svelte
+++ b/src/app/components/EventInfo.svelte
@@ -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>
diff --git a/src/app/components/Pin.svelte b/src/app/components/Pin.svelte
index 231fd065..e11b11f1 100644
--- a/src/app/components/Pin.svelte
+++ b/src/app/components/Pin.svelte
@@ -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"}
diff --git a/src/app/components/PinboardSelect.svelte b/src/app/components/PinboardSelect.svelte
index ed660192..edcc2463 100644
--- a/src/app/components/PinboardSelect.svelte
+++ b/src/app/components/PinboardSelect.svelte
@@ -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" />
diff --git a/src/app/components/ProfilePage.svelte b/src/app/components/ProfilePage.svelte
index 05afdabc..e4728faf 100644
--- a/src/app/components/ProfilePage.svelte
+++ b/src/app/components/ProfilePage.svelte
@@ -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>
 
diff --git a/src/app/components/RelayItem.svelte b/src/app/components/RelayItem.svelte
index c4b68046..4d8ecc95 100644
--- a/src/app/components/RelayItem.svelte
+++ b/src/app/components/RelayItem.svelte
@@ -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}
diff --git a/src/app/components/RelaySummary.svelte b/src/app/components/RelaySummary.svelte
index 44a2cd99..79d60a62 100644
--- a/src/app/components/RelaySummary.svelte
+++ b/src/app/components/RelaySummary.svelte
@@ -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>
diff --git a/src/app/components/RoomName.svelte b/src/app/components/RoomName.svelte
index 29aa1afc..4e3ea185 100644
--- a/src/app/components/RoomName.svelte
+++ b/src/app/components/RoomName.svelte
@@ -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>
diff --git a/src/app/components/SpaceMenu.svelte b/src/app/components/SpaceMenu.svelte
index ab0c975d..240db66d 100644
--- a/src/app/components/SpaceMenu.svelte
+++ b/src/app/components/SpaceMenu.svelte
@@ -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}>
diff --git a/src/app/components/ThreadBoardItem.svelte b/src/app/components/ThreadBoardItem.svelte
index 6e2bfd60..6b3cad06 100644
--- a/src/app/components/ThreadBoardItem.svelte
+++ b/src/app/components/ThreadBoardItem.svelte
@@ -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>
diff --git a/src/app/components/ThreadPost.svelte b/src/app/components/ThreadPost.svelte
index 9b3aa468..98b4abe1 100644
--- a/src/app/components/ThreadPost.svelte
+++ b/src/app/components/ThreadPost.svelte
@@ -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>
diff --git a/src/app/components/VoiceRoomItem.svelte b/src/app/components/VoiceRoomItem.svelte
index 5d9d59a2..44b847c2 100644
--- a/src/app/components/VoiceRoomItem.svelte
+++ b/src/app/components/VoiceRoomItem.svelte
@@ -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
diff --git a/src/app/components/VoiceRoomJoinDialog.svelte b/src/app/components/VoiceRoomJoinDialog.svelte
index 57273b7b..b1425ea0 100644
--- a/src/app/components/VoiceRoomJoinDialog.svelte
+++ b/src/app/components/VoiceRoomJoinDialog.svelte
@@ -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>
diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index 6b24465f..abb49039 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -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>
diff --git a/src/app/components/ZapInvoice.svelte b/src/app/components/ZapInvoice.svelte
index 9f376b7c..c1f2d0e8 100644
--- a/src/app/components/ZapInvoice.svelte
+++ b/src/app/components/ZapInvoice.svelte
@@ -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>
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
index 6560fbb2..1418b2df 100644
--- a/src/routes/settings/+layout.svelte
+++ b/src/routes/settings/+layout.svelte
@@ -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
diff --git a/src/routes/settings/profile/+page.svelte b/src/routes/settings/profile/+page.svelte
index 6ff015b0..62b4133f 100644
--- a/src/routes/settings/profile/+page.svelte
+++ b/src/routes/settings/profile/+page.svelte
@@ -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} />
diff --git a/src/routes/spaces/+page.svelte b/src/routes/spaces/+page.svelte
index defc21f1..da29b663 100644
--- a/src/routes/spaces/+page.svelte
+++ b/src/routes/spaces/+page.svelte
@@ -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>
diff --git a/src/routes/spaces/[relay]/about/+page.svelte b/src/routes/spaces/[relay]/about/+page.svelte
index 196bcb32..ebbd472c 100644
--- a/src/routes/spaces/[relay]/about/+page.svelte
+++ b/src/routes/spaces/[relay]/about/+page.svelte
@@ -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>
diff --git a/src/routes/spaces/[relay]/library/[address]/+page.svelte b/src/routes/spaces/[relay]/library/[address]/+page.svelte
index 269ab57b..6b9a6113 100644
--- a/src/routes/spaces/[relay]/library/[address]/+page.svelte
+++ b/src/routes/spaces/[relay]/library/[address]/+page.svelte
@@ -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}
diff --git a/src/routes/spaces/[relay]/threads/[id]/+page.svelte b/src/routes/spaces/[relay]/threads/[id]/+page.svelte
index 60f273d6..8ae064dd 100644
--- a/src/routes/spaces/[relay]/threads/[id]/+page.svelte
+++ b/src/routes/spaces/[relay]/threads/[id]/+page.svelte
@@ -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">