UX: Prevent badges on usercards from overflowing (#12037)

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) {

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>

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

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 {