UX: Truncate (don't wrap) badges in user cards if the text is long

UX: Truncate (don’t wrap) badges in user cards if the text is long

diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index 62b989c..9c00506 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -289,6 +289,10 @@ $user_card_background: $secondary;
     margin-top: 5px;
 
     .user-badge {
+      display: flex;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       margin-right: 0.5em;
       background: $primary-very-low;
       border: 1px solid $primary-low;
@@ -305,6 +309,7 @@ $user_card_background: $secondary;
   .more-user-badges {
     @extend .user-badge;
     padding: 3px 8px;
+    white-space: nowrap;
   }
 
   .suspended {

GitHub sha: 94f8c4ec