diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index e76f2973d..21a5571da 100644
--- a/src/components/user_card/user_card.scss
+++ b/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 {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 8656c6620..92eb03830 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -102,42 +102,41 @@
               </router-link>
             </div>
             <div class="bottom-line">
-              <user-link
-                class="user-screen-name"
-                :user="user"
-              />
-              <div class="tags" v-if="!hideBio">
-                <span
-                  v-if="user.deactivated"
-                  class="alert neutral user-role"
-                >
-                  {{ $t('user_card.deactivated') }}
-                </span>
-                <span
-                  v-if="!!visibleRole"
-                  class="alert neutral user-role"
-                >
-                  {{ $t(`general.role.${visibleRole}`) }}
-                </span>
-                <span
-                  v-if="user.actor_type === 'Service'"
-                  class="alert neutral user-role"
-                >
-                  {{ $t('user_card.bot') }}
-                </span>
-                <span
-                  v-if="user.actor_type === 'Group'"
-                  class="alert user-role"
-                >
-                  {{ $t('user_card.group') }}
+              <div class="user-screen-name">
+                <user-link
+                  :user="user"
+                />
+                <span v-if="user.locked">
+                  <FAIcon
+                    class="lock-icon"
+                    icon="lock"
+                    size="sm"
+                  />
                 </span>
               </div>
-              <span v-if="user.locked">
-                <FAIcon
-                  class="lock-icon"
-                  icon="lock"
-                  size="sm"
-                />
+              <span
+                v-if="user.deactivated"
+                class="alert neutral user-role"
+              >
+                {{ $t('user_card.deactivated') }}
+              </span>
+              <span
+                v-if="!!visibleRole"
+                class="alert neutral user-role"
+              >
+                {{ $t(`general.role.${visibleRole}`) }}
+              </span>
+              <span
+                v-if="user.actor_type === 'Service'"
+                class="alert neutral user-role"
+              >
+                {{ $t('user_card.bot') }}
+              </span>
+              <span
+                v-if="user.actor_type === 'Group'"
+                class="alert user-role"
+              >
+                {{ $t('user_card.group') }}
               </span>
               <span
                 v-if="relationship.muting && muteExpiryAvailable"
@@ -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>