diff --git a/frontend/packages/shared/src/badge/Badge.css b/frontend/packages/shared/src/badge/Badge.css
index ca8516f9..784b201e 100644
--- a/frontend/packages/shared/src/badge/Badge.css
+++ b/frontend/packages/shared/src/badge/Badge.css
@@ -61,10 +61,22 @@
   -webkit-backdrop-filter: blur(6px) saturate(140%);
   backdrop-filter: blur(6px) saturate(140%);
 }
+/* The base `.ui-badge` rule's `border-radius: 1em` is a genuine pill at
+   its own compact display-only height, but `min-height: 2.75em` below
+   (the WCAG 2.5.5 touch-target floor) makes an *interactive* badge tall
+   enough that a fixed 1em radius no longer reaches half the box's
+   height — the corners round without the sides ever meeting the same
+   curve, i.e. a rounded rectangle, not a pill (mara: "make clickable
+   badges a proper pill not a roundrect"). `999px` is the standard
+   stadium-shape trick — a radius the browser clamps to exactly half the
+   box's height whenever it exceeds it, so it reads as a true pill at
+   any height instead of one tuned for a specific one. Same value
+   `.hive-pill`/`.hive-pill-sm` (`shared/src/pill.css`) already use. */
 .ui-badge-interactive {
   cursor: pointer;
   min-height: 2.75em;
   padding-inline: 0.8em;
+  border-radius: 999px;
 }
 .ui-badge-interactive:hover {
   background: var(--border);