From 133cd1bba23563a730abaa0a1fa024497f52230b Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Wed, 2 Sep 2026 15:13:22 +0000
Subject: [PATCH] Ellipsize badge content instead of overflowing the container
 (#400)

Reviewed-on: https://gitea.coracle.social/coracle/flotilla/pulls/400
Co-authored-by: Coracle-Bot <npub1klq6260@nostr.local>
---
 src/app/components/EventInfo.svelte          |  2 +-
 src/app/components/ProfileInfo.svelte        |  2 +-
 src/lib/components/badge.css                 |  9 +++++++-
 src/routes/spaces/[relay]/about/+page.svelte | 24 ++++++++++----------
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/app/components/EventInfo.svelte b/src/app/components/EventInfo.svelte
index 2d50ce7c..53d3a9fe 100644
--- a/src/app/components/EventInfo.svelte
+++ b/src/app/components/EventInfo.svelte
@@ -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>
diff --git a/src/app/components/ProfileInfo.svelte b/src/app/components/ProfileInfo.svelte
index 21db813a..ad986cf1 100644
--- a/src/app/components/ProfileInfo.svelte
+++ b/src/app/components/ProfileInfo.svelte
@@ -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>
diff --git a/src/lib/components/badge.css b/src/lib/components/badge.css
index 3863f7a2..15f19a0d 100644
--- a/src/lib/components/badge.css
+++ b/src/lib/components/badge.css
@@ -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;
diff --git a/src/routes/spaces/[relay]/about/+page.svelte b/src/routes/spaces/[relay]/about/+page.svelte
index 4b188d07..76ce8ec1 100644
--- a/src/routes/spaces/[relay]/about/+page.svelte
+++ b/src/routes/spaces/[relay]/about/+page.svelte
@@ -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>