From d767af15d376b2e9713de8b4a9e0a0eb76f520f4 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Thu, 9 May 2024 15:32:02 -0700
Subject: [PATCH] feat: Split display name and username columns

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 .../src/components/Users/UserListHeader.vue       |  6 +++++-
 apps/settings/src/components/Users/UserRow.vue    | 15 ++++++++-------
 .../src/components/Users/shared/styles.scss       |  4 ++++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue
index e314bcb6a7379..51212239fc07c 100644
--- a/apps/settings/src/components/Users/UserListHeader.vue
+++ b/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>
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index 3586a7702b1c0..76241a3118ef0 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/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
diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss
index a2ddcd8c8beb1..d790b0e5daf2a 100644
--- a/apps/settings/src/components/Users/shared/styles.scss
+++ b/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);