From 16cf973ce562c9efe86b1363faceb0ca8f999135 Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Fri, 26 Sep 2025 18:25:17 -0400
Subject: [PATCH] fix: truncate long usernames in UI

Long usernames were causing layout issues in several parts of the application. This change truncates long usernames with an ellipsis to prevent them from overflowing.

The following areas have been fixed:
- Edit User modal
- User Chats modal
- Edit User Group modal
- Users table in the admin overview

fix: truncate long usernames in UI

Long usernames were causing layout issues in several parts of the application. This change truncates long usernames with an ellipsis to prevent them from overflowing.

The following areas have been fixed:
- Edit User modal
- User Chats modal
- Edit User Group modal
- Users table in the admin overview

Revert "fix: truncate long usernames in UI"

This reverts commit b623fdc95d0c494228b49f9369db3bbb3042cef0.
---
 src/lib/components/admin/Users/Groups/Users.svelte        | 4 ++--
 src/lib/components/admin/Users/UserList.svelte            | 8 ++++----
 .../components/admin/Users/UserList/EditUserModal.svelte  | 4 ++--
 .../components/admin/Users/UserList/UserChatsModal.svelte | 4 +++-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/admin/Users/Groups/Users.svelte b/src/lib/components/admin/Users/Groups/Users.svelte
index 9d13fa45f0..2cc75a30d3 100644
--- a/src/lib/components/admin/Users/Groups/Users.svelte
+++ b/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>
 
diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
index ebb3687e7d..12c9200afc 100644
--- a/src/lib/components/admin/Users/UserList.svelte
+++ b/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>
diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
index 51d9f0eb3b..ba4e0d9951 100644
--- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte
+++ b/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')}
diff --git a/src/lib/components/admin/Users/UserList/UserChatsModal.svelte b/src/lib/components/admin/Users/UserList/UserChatsModal.svelte
index 1e17dfa3ad..480f7ccf56 100644
--- a/src/lib/components/admin/Users/UserList/UserChatsModal.svelte
+++ b/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}