diff --git a/app/assets/javascripts/discourse/app/components/user-badge.js b/app/assets/javascripts/discourse/app/components/user-badge.js
index 6a2c8ceddb1..ae21334c03e 100644
--- a/app/assets/javascripts/discourse/app/components/user-badge.js
+++ b/app/assets/javascripts/discourse/app/components/user-badge.js
@@ -2,7 +2,7 @@ import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
-  tagName: "span",
+  tagName: "",
 
   @discourseComputed("count")
   showGrantCount(count) {
diff --git a/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs b/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs
index 89c7dd8b702..5d89b20eb6b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/user-badge.hbs
@@ -1,4 +1,4 @@
-<a href={{this.badgeUrl}}>
+<a class="user-card-badge-link" href={{this.badgeUrl}}>
   {{#badge-button badge=@badge}}
     {{#if this.showGrantCount}}
       <span class="count">(&times;&nbsp;{{@count}})</span>
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 5a28b647470..1d647f2faa4 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -239,7 +239,11 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       border: 1px solid var(--primary-low);
       color: var(--primary);
     }
+    .user-card-badge-link {
+      overflow: hidden;
+    }
     .more-user-badges {
+      flex: 0 0 auto; // this is more important than other badges, so don't allow it to shrink
       a {
         @extend .user-badge;
       }
diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss
index 94ec4b19e58..67f97596add 100644
--- a/app/assets/stylesheets/mobile/components/user-card.scss
+++ b/app/assets/stylesheets/mobile/components/user-card.scss
@@ -55,14 +55,15 @@ $avatar_width: 120px;
   // badges
   .badge-section {
     flex-wrap: wrap;
-    > span {
+    .user-card-badge-link,
+    .more-user-badges {
       display: flex;
       flex: 0 1 50%;
       max-width: 50%; // for text ellipsis
       padding: 2px 0;
       box-sizing: border-box;
-      &:nth-of-type(1),
-      &:nth-of-type(3) {
+      &:nth-child(1),
+      &:nth-child(3) {
         padding-right: 4px;
       }
       a {