fix(ui): prevent long usernames from overflowing Edit User modal, User Preview modal, and sidebar (#25185)
Long usernames overflow the Edit User modal, User Preview modal header, and the sidebar user area because the flex containers lack width constraints. - EditUserModal: add min-w-0 to the flex-1 container so the existing truncate class takes effect - UserPreviewModal: add min-w-0 and truncate to the title container, flex-shrink-0 to the close button so it stays visible - Sidebar: add truncate to the username display and flex-shrink-0 to the avatar container to prevent it from being squeezed
This commit is contained in:
@@ -35,14 +35,14 @@
|
||||
<Modal size="md" bind:show>
|
||||
<div>
|
||||
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 mb-1.5">
|
||||
<div class=" text-lg font-medium self-center font-primary">
|
||||
<div class=" text-lg font-medium self-center font-primary min-w-0 truncate">
|
||||
{$i18n.t('User Preview')}
|
||||
{#if userName}
|
||||
<span class="text-sm font-normal text-gray-500 ml-1">{userName}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
class="self-center"
|
||||
class="self-center flex-shrink-0"
|
||||
on:click={() => {
|
||||
show = false;
|
||||
}}
|
||||
|
||||
@@ -400,7 +400,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class=" px-3 py-1"> {user.email} </td>
|
||||
<td class=" px-3 py-1 max-w-48 truncate"> {user.email} </td>
|
||||
|
||||
<td class=" px-3 py-1">
|
||||
{dayjs(user.last_active_at * 1000).fromNow()}
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class=" flex-1">
|
||||
<div class=" flex-1 min-w-0">
|
||||
<div class="overflow-hidden w-ful mb-2">
|
||||
<div class=" self-center capitalize font-medium truncate">
|
||||
{selectedUser.name}
|
||||
|
||||
@@ -1611,7 +1611,7 @@
|
||||
<div
|
||||
class=" flex items-center rounded-2xl py-2 px-1.5 w-full hover:bg-gray-100/50 dark:hover:bg-gray-900/50 transition"
|
||||
>
|
||||
<div class=" self-center mr-3 relative">
|
||||
<div class=" self-center mr-3 relative flex-shrink-0">
|
||||
<img
|
||||
src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
|
||||
class=" size-7 object-cover rounded-full"
|
||||
@@ -1631,7 +1631,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class=" self-center font-medium">{$user?.name}</div>
|
||||
<div class=" self-center font-medium truncate">{$user?.name}</div>
|
||||
</div>
|
||||
</UserMenu>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user