From b1f292965c73d6a43523dd871d6ebb5b7d64cc4c Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 25 Feb 2026 19:00:40 -0600
Subject: [PATCH] refac

---
 src/lib/components/layout/Navbar/Menu.svelte      | 10 ++++++----
 src/lib/components/layout/Sidebar/ChatMenu.svelte | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/layout/Navbar/Menu.svelte b/src/lib/components/layout/Navbar/Menu.svelte
index 72fe5b1857..81d724be26 100644
--- a/src/lib/components/layout/Navbar/Menu.svelte
+++ b/src/lib/components/layout/Navbar/Menu.svelte
@@ -422,7 +422,7 @@
 							<div class="flex items-center">{$i18n.t('Move')}</div>
 						</DropdownMenu.SubTrigger>
 						<DropdownMenu.SubContent
-							class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100  dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
+							class="select-none w-full max-w-[200px] rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100  dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
 							transition={flyAndScale}
 							sideOffset={8}
 						>
@@ -430,14 +430,16 @@
 								{#if folder?.id}
 									<DropdownMenu.Item
 										draggable="false"
-										class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+										class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl overflow-hidden"
 										on:click={() => {
 											moveChatHandler(chat.id, folder.id);
 										}}
 									>
-										<Folder strokeWidth="1.5" />
+										<div class="shrink-0">
+											<Folder strokeWidth="1.5" />
+										</div>
 
-										<div class="flex items-center">{folder.name ?? 'Folder'}</div>
+										<div class="truncate">{folder.name ?? 'Folder'}</div>
 									</DropdownMenu.Item>
 								{/if}
 							{/each}
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index edf3c6975e..dcdc9d6a33 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -412,21 +412,23 @@
 						<div class="flex items-center">{$i18n.t('Move')}</div>
 					</DropdownMenu.SubTrigger>
 					<DropdownMenu.SubContent
-						class="select-none w-full rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100  dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
+						class="select-none w-full max-w-[200px] rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100  dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
 						transition={flyAndScale}
 						sideOffset={8}
 					>
 						{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
 							<DropdownMenu.Item
 								draggable="false"
-								class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+								class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl overflow-hidden"
 								on:click={() => {
 									moveChatHandler(chatId, folder.id);
 								}}
 							>
-								<Folder />
+								<div class="shrink-0">
+									<Folder />
+								</div>
 
-								<div class="flex items-center">{folder?.name ?? 'Folder'}</div>
+								<div class="truncate">{folder?.name ?? 'Folder'}</div>
 							</DropdownMenu.Item>
 						{/each}
 					</DropdownMenu.SubContent>