Switch from ellipsize to truncate

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">

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}

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>

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

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" />

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>
 

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}

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>

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>

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

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>

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>

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

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>

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>

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>

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

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

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>

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>

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}

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">