user card admin info

src/components/basic_user_card/basic_user_card.js

@@ -8,7 +8,15 @@ import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const BasicUserCard = {
-  props: ['user'],
+  props: {
+    user: {
+      type: Object,
+    },
+    showLineLabels: {
+      type: Boolean,
+      default: false,
+    }
+  },
   components: {
     UserPopover,
     UserAvatar,

src/components/basic_user_card/basic_user_card.vue

@@ -23,6 +23,10 @@
         :title="user.name"
         class="basic-user-card-user-name"
       >
+        <strong v-if="showLineLabels">
+          {{ $t('admin_dash.users.labels.name_colon') }}
+          {{ ' ' }}
+        </strong>
         <RichContent
           class="basic-user-card-user-name-value"
           :html="user.name"
@@ -31,6 +35,10 @@
         />
       </div>
       <div>
+        <strong v-if="showLineLabels">
+          {{ $t('admin_dash.users.labels.handle_colon') }}
+          {{ ' ' }}
+        </strong>
         <user-link
           class="basic-user-card-screen-name"
           :user="user"
@@ -48,6 +56,7 @@
   display: flex;
   flex: 1 0;
   margin: 0;
+  line-height: 1.25;
 
   --emoji-size: 1em;
 
@@ -69,7 +78,7 @@
 
   &-user-name-value,
   &-screen-name {
-    display: inline-block;
+    display: inline;
     max-width: 100%;
     overflow: hidden;
     white-space: nowrap;