From c665d4a7c6390803367e74ae1b7c1ef782663751 Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Sun, 31 May 2026 17:51:56 -0400
Subject: [PATCH] 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
---
 src/lib/components/admin/UserPreviewModal.svelte             | 4 ++--
 src/lib/components/admin/Users/UserList.svelte               | 2 +-
 src/lib/components/admin/Users/UserList/EditUserModal.svelte | 2 +-
 src/lib/components/layout/Sidebar.svelte                     | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/admin/UserPreviewModal.svelte b/src/lib/components/admin/UserPreviewModal.svelte
index ce2c66bde5..d7791ebb10 100644
--- a/src/lib/components/admin/UserPreviewModal.svelte
+++ b/src/lib/components/admin/UserPreviewModal.svelte
@@ -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;
 				}}
diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte
index 0a58618473..9ca0a65d38 100644
--- a/src/lib/components/admin/Users/UserList.svelte
+++ b/src/lib/components/admin/Users/UserList.svelte
@@ -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()}
diff --git a/src/lib/components/admin/Users/UserList/EditUserModal.svelte b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
index 3fb6186284..ba115ad921 100644
--- a/src/lib/components/admin/Users/UserList/EditUserModal.svelte
+++ b/src/lib/components/admin/Users/UserList/EditUserModal.svelte
@@ -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}
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index ec470c4161..1df8725532 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -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}