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.
This commit is contained in:
parent
807a8be299
commit
16cf973ce5
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue