ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-14 21:35:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: truncate long usernames in UI

Browse source 
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.
This commit is contained in:
silentoplayz 2025-09-26 18:25:17 -04:00
parent 807a8be299
commit 16cf973ce5
4 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/admin/Users/Groups/Users.svelte
View file

@ -75,10 +75,10 @@
/> />
</div> </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"> <Tooltip content={user.email} placement="top-start">
<div class="flex"> <div class="flex">
<div class=" font-medium self-center">{user.name}</div> <div class=" font-medium self-center truncate">{user.name}</div>
</div> </div>
</Tooltip> </Tooltip>

8
src/lib/components/admin/Users/UserList.svelte
View file

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

4
src/lib/components/admin/Users/UserList/EditUserModal.svelte
View file

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

4
src/lib/components/admin/Users/UserList/UserChatsModal.svelte
View file

@ -107,7 +107,9 @@
bind:query bind:query
bind:orderBy bind:orderBy
bind:direction 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.')} emptyPlaceholder={$i18n.t('No chats found for this user.')}
shareUrl={true} shareUrl={true}
{chatList} {chatList}