user tags overflow

src/components/user_card/user_card.scss

@@ -234,29 +234,6 @@
     }
   }
 
-  .bottom-line {
-    font-weight: lighter;
-    font-size: 0.9em;
-    align-items: baseline;
-
-    .lock-icon {
-      margin-left: 0.5em;
-    }
-
-    .user-screen-name {
-      color: var(--text);
-      min-width: 1px;
-      flex: 0 1 auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .user-role {
-      flex: none;
-      align-self: baseline;
-    }
-  }
-
   .user-summary {
     display: block;
     margin-left: 0.6em;
@@ -287,10 +264,28 @@
     }
 
     .bottom-line {
-      display: flex;
+      white-space: normal;
       font-weight: 500;
+      font-size: 0.9em;
       line-height: 1.5;
     }
+
+    .lock-icon {
+      margin-left: 0.5em;
+    }
+
+    .user-screen-name {
+      color: var(--text);
+      min-width: 5em;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: inline-block;
+    }
+
+    .user-role {
+      display: inline-block;
+      vertical-align: baseline;
+    }
   }
 
   .user-name {

src/components/user_card/user_card.vue

@@ -102,11 +102,18 @@
               </router-link>
             </div>
             <div class="bottom-line">
+              <div class="user-screen-name">
                 <user-link
-                class="user-screen-name"
                   :user="user"
                 />
-              <div class="tags" v-if="!hideBio">
+                <span v-if="user.locked">
+                  <FAIcon
+                    class="lock-icon"
+                    icon="lock"
+                    size="sm"
+                  />
+                </span>
+              </div>
               <span
                 v-if="user.deactivated"
                 class="alert neutral user-role"
@@ -131,14 +138,6 @@
               >
                 {{ $t('user_card.group') }}
               </span>
-              </div>
-              <span v-if="user.locked">
-                <FAIcon
-                  class="lock-icon"
-                  icon="lock"
-                  size="sm"
-                />
-              </span>
               <span
                 v-if="relationship.muting && muteExpiryAvailable"
                 class="alert neutral user-role"
@@ -151,12 +150,12 @@
               >
                 {{ blockExpiry }}
               </span>
-              <div
+              <span
                 v-if="relationship.followed_by && loggedIn && isOtherUser"
                 class="alert neutral user-role"
               >
                 {{ $t('user_card.follows_you') }}
-              </div>
+              </span>
             </div>
           </div>
         </div>