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>