feat: Split display name and username columns

Signed-off-by: Christopher Ng <chrng8@gmail.com>

apps/settings/src/components/Users/UserListHeader.vue

@@ -35,7 +35,11 @@
 			<strong>
 				{{ t('settings', 'Display name') }}
 			</strong>
-			<span class="header__subtitle">
+		</th>
+		<th class="header__cell header__cell--username"
+			data-cy-user-list-header-username
+			scope="col">
+			<span>
 				{{ t('settings', 'Username') }}
 			</span>
 		</th>

apps/settings/src/components/Users/UserRow.vue

@@ -54,13 +54,14 @@
 					spellcheck="false"
 					@trailing-button-click="updateDisplayName" />
 			</template>
-			<template v-else>
-				<strong v-if="!isObfuscated"
-					:title="user.displayname?.length > 20 ? user.displayname : null">
-					{{ user.displayname }}
-				</strong>
-				<span class="row__subtitle">{{ user.id }}</span>
-			</template>
+			<strong v-else-if="!isObfuscated"
+				:title="user.displayname?.length > 20 ? user.displayname : null">
+				{{ user.displayname }}
+			</strong>
+		</td>
+
+		<td class="row__cell row__cell--username" data-cy-user-list-cell-username>
+			<span class="row__subtitle">{{ user.id }}</span>
 		</td>
 
 		<td data-cy-user-list-cell-password

apps/settings/src/components/Users/shared/styles.scss

@@ -66,6 +66,10 @@
 			}
 		}
 
+		&--username {
+			padding-left: calc(var(--default-grid-baseline) * 3);
+		}
+
 		&--avatar {
 			min-width: var(--avatar-cell-width);
 			width: var(--avatar-cell-width);