Merge pull request #17805 from silentoplayz/fix-username-truncation

fix: truncate long usernames in UI

src/lib/components/admin/Users/Groups/Users.svelte

@@ -75,10 +75,10 @@
 							/>
 						</div>
 
-						<div class="flex w-full items-center justify-between">
+						<div class="flex w-full items-center justify-between overflow-hidden">
 							<Tooltip content={user.email} placement="top-start">
 								<div class="flex">
-									<div class=" font-medium self-center">{user.name}</div>
+									<div class=" font-medium self-center truncate">{user.name}</div>
 								</div>
 							</Tooltip>
 

src/lib/components/admin/Users/UserList.svelte

@@ -383,10 +383,10 @@
 								/>
 							</button>
 						</td>
-						<td class="px-3 py-1 font-medium text-gray-900 dark:text-white w-max">
-							<div class="flex flex-row w-max">
+						<td class="px-3 py-1 font-medium text-gray-900 dark:text-white max-w-48">
+							<div class="flex items-center">
 								<img
-									class=" rounded-full w-6 h-6 object-cover mr-2.5"
+									class="rounded-full w-6 h-6 object-cover mr-2.5 flex-shrink-0"
 									src={user?.profile_image_url?.startsWith(WEBUI_BASE_URL) ||
 									user.profile_image_url.startsWith('https://www.gravatar.com/avatar/') ||
 									user.profile_image_url.startsWith('data:')
@@ -395,7 +395,7 @@
 									alt="user"
 								/>
 
-								<div class=" font-medium self-center">{user.name}</div>
+								<div class="font-medium truncate">{user.name}</div>
 							</div>
 						</td>
 						<td class=" px-3 py-1"> {user.email} </td>

src/lib/components/admin/Users/UserList/EditUserModal.svelte

@@ -92,8 +92,8 @@
 							/>
 						</div>
 
-						<div>
-							<div class=" self-center capitalize font-semibold">{selectedUser.name}</div>
+						<div class="overflow-hidden w-full">
+							<div class=" self-center capitalize font-semibold truncate">{selectedUser.name}</div>
 
 							<div class="text-xs text-gray-500">
 								{$i18n.t('Created at')}

src/lib/components/admin/Users/UserList/UserChatsModal.svelte

@@ -107,7 +107,9 @@
 	bind:query
 	bind:orderBy
 	bind:direction
-	title={$i18n.t("{{user}}'s Chats", { user: user.name })}
+	title={$i18n.t("{{user}}'s Chats", {
+		user: user.name.length > 32 ? `${user.name.slice(0, 32)}...` : user.name
+	})}
 	emptyPlaceholder={$i18n.t('No chats found for this user.')}
 	shareUrl={true}
 	{chatList}