From 410ebb05d4d3b90f7ae8033ad77c73ee4f58ced6 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 14 Jul 2026 00:54:01 -0400
Subject: [PATCH] refac

---
 .../admin/Evaluations/FeedbackMenu.svelte        |  4 ++--
 .../admin/Functions/AddFunctionMenu.svelte       | 12 ++++++------
 .../channel/MessageInput/InputMenu.svelte        |  8 ++++----
 .../components/chat/FileNav/FileEntryRow.svelte  | 16 ++++++++--------
 .../CallOverlay/VideoInputMenu.svelte            |  2 +-
 .../ResponseMessage/RegenerateMenu.svelte        | 12 ++++++------
 src/lib/components/playground/Chat.svelte        | 10 +++++-----
 .../workspace/Knowledge/ItemMenu.svelte          |  8 ++++----
 .../workspace/Prompts/PromptHistoryMenu.svelte   |  8 ++++----
 .../workspace/Tools/AddToolMenu.svelte           | 12 ++++++------
 10 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/admin/Evaluations/FeedbackMenu.svelte b/src/lib/components/admin/Evaluations/FeedbackMenu.svelte
index 5af315bb0f..bf08cb7ef6 100644
--- a/src/lib/components/admin/Evaluations/FeedbackMenu.svelte
+++ b/src/lib/components/admin/Evaluations/FeedbackMenu.svelte
@@ -20,13 +20,13 @@
 	<div slot="content">
 		<DropdownMenu className="min-w-[150px]">
 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					dispatch('delete');
 					show = false;
 				}}
 			>
-				<GarbageBin strokeWidth="2" />
+				<GarbageBin className="size-3.5" strokeWidth="2" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
 		</DropdownMenu>
diff --git a/src/lib/components/admin/Functions/AddFunctionMenu.svelte b/src/lib/components/admin/Functions/AddFunctionMenu.svelte
index cac13eb2a7..56e17670c3 100644
--- a/src/lib/components/admin/Functions/AddFunctionMenu.svelte
+++ b/src/lib/components/admin/Functions/AddFunctionMenu.svelte
@@ -33,27 +33,27 @@
 	<div slot="content">
 		<DropdownMenu className="min-w-[190px]">
 			<button
-				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 w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={async () => {
 					createHandler();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<Pencil />
+				<div class="self-center">
+					<Pencil className="size-3.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('New Function')}</div>
 			</button>
 
 			<button
-				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 w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={async () => {
 					importFromLinkHandler();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<Link />
+				<div class="self-center">
+					<Link className="size-3.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Import From Link')}</div>
 			</button>
diff --git a/src/lib/components/channel/MessageInput/InputMenu.svelte b/src/lib/components/channel/MessageInput/InputMenu.svelte
index cf6aeeb90f..492cd7290c 100644
--- a/src/lib/components/channel/MessageInput/InputMenu.svelte
+++ b/src/lib/components/channel/MessageInput/InputMenu.svelte
@@ -46,26 +46,26 @@
 	<div slot="content">
 		<DropdownMenu className="w-[200px] z-999 transition">
 			<button
-				class="select-none flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				type="button"
 				on:click={() => {
 					uploadFilesHandler();
 					show = false;
 				}}
 			>
-				<Clip />
+				<Clip className="size-3.5" />
 				<div class="line-clamp-1">{$i18n.t('Upload Files')}</div>
 			</button>
 
 			<button
-				class="select-none flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-xl"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				type="button"
 				on:click={() => {
 					screenCaptureHandler();
 					show = false;
 				}}
 			>
-				<Camera />
+				<Camera className="size-3.5" />
 				<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
 			</button>
 		</DropdownMenu>
diff --git a/src/lib/components/chat/FileNav/FileEntryRow.svelte b/src/lib/components/chat/FileNav/FileEntryRow.svelte
index a5cc73e7a8..32402b228a 100644
--- a/src/lib/components/chat/FileNav/FileEntryRow.svelte
+++ b/src/lib/components/chat/FileNav/FileEntryRow.svelte
@@ -308,7 +308,7 @@
 				<DropdownMenu className="min-w-[150px] z-[9999999]">
 					<button
 						type="button"
-						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition"
 						on:click={(e) => {
 							e.stopPropagation();
 							const path =
@@ -322,7 +322,7 @@
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 20 20"
 							fill="currentColor"
-							class="size-4"
+							class="size-3.5"
 						>
 							<path
 								d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129V2.75Z"
@@ -336,7 +336,7 @@
 
 					<button
 						type="button"
-						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition"
 						on:click={(e) => {
 							e.stopPropagation();
 							const path =
@@ -348,31 +348,31 @@
 							});
 						}}
 					>
-						<Clipboard className="size-4" strokeWidth="1.5" />
+						<Clipboard className="size-3.5" strokeWidth="1.5" />
 						<div class="flex items-center">{$i18n.t('Copy Path')}</div>
 					</button>
 
 					<button
 						type="button"
-						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition"
 						on:click={(e) => {
 							e.stopPropagation();
 							startRename();
 						}}
 					>
-						<Pencil className="size-4" strokeWidth="1.5" />
+						<Pencil className="size-3.5" strokeWidth="1.5" />
 						<div class="flex items-center">{$i18n.t('Rename')}</div>
 					</button>
 
 					<button
 						type="button"
-						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
+						class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition"
 						on:click={(e) => {
 							e.stopPropagation();
 							onDelete(`${currentPath}${entry.name}`, entry.name);
 						}}
 					>
-						<GarbageBin className="size-4" />
+						<GarbageBin className="size-3.5" />
 						<div class="flex items-center">{$i18n.t('Delete')}</div>
 					</button>
 				</DropdownMenu>
diff --git a/src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte b/src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte
index dec315b0fe..8c021c6e09 100644
--- a/src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte
@@ -29,7 +29,7 @@
 		<DropdownMenu className="min-w-[180px] z-[9999] dark:bg-gray-900 shadow-xs">
 			{#each devices as device}
 				<button
-					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-md w-full"
+					class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					on:click={() => {
 						dispatch('change', device.deviceId);
 					}}
diff --git a/src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte b/src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
index 0316e4af9c..1076d86333 100644
--- a/src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
@@ -73,7 +73,7 @@
 			</div>
 			<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1" />
 			<button
-				class="select-none 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 w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onRegenerate();
 					show = false;
@@ -86,7 +86,7 @@
 					stroke-width="2"
 					aria-hidden="true"
 					stroke="currentColor"
-					class="w-4 h-4"
+					class="size-3.5"
 				>
 					<path
 						stroke-linecap="round"
@@ -98,22 +98,22 @@
 			</button>
 
 			<button
-				class="select-none 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 w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onRegenerate($i18n.t('Add Details'));
 				}}
 			>
-				<LineSpace strokeWidth="2" />
+				<LineSpace className="size-3.5" strokeWidth="2" />
 				<div class="flex items-center">{$i18n.t('Add Details')}</div>
 			</button>
 
 			<button
-				class="select-none 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 w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onRegenerate($i18n.t('More Concise'));
 				}}
 			>
-				<LineSpaceSmaller strokeWidth="2" />
+				<LineSpaceSmaller className="size-3.5" strokeWidth="2" />
 				<div class="flex items-center">{$i18n.t('More Concise')}</div>
 			</button>
 		</DropdownMenu>
diff --git a/src/lib/components/playground/Chat.svelte b/src/lib/components/playground/Chat.svelte
index 58e111ae2e..ad02dc5bbb 100644
--- a/src/lib/components/playground/Chat.svelte
+++ b/src/lib/components/playground/Chat.svelte
@@ -396,16 +396,16 @@
 
 					<div slot="content">
 						<DropdownMenu className="min-w-[200px]">
-							<DropdownSub>
+							<DropdownSub contentClass="select-none z-50">
 								<button
 									slot="trigger"
-									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 select-none w-full"
+									class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 								>
-									<Download strokeWidth="1.5" />
+									<Download className="size-3.5" strokeWidth="1.5" />
 									<div class="flex items-center">{$i18n.t('Download')}</div>
 								</button>
 								<button
-									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 select-none w-full"
+									class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 									disabled={messages.length === 0}
 									on:click={() => {
 										exportToJson();
@@ -416,7 +416,7 @@
 									</div>
 								</button>
 								<button
-									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 select-none w-full"
+									class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 									disabled={messages.length === 0}
 									on:click={() => {
 										downloadTxt();
diff --git a/src/lib/components/workspace/Knowledge/ItemMenu.svelte b/src/lib/components/workspace/Knowledge/ItemMenu.svelte
index ba02e29f0d..6c05b3f6bf 100644
--- a/src/lib/components/workspace/Knowledge/ItemMenu.svelte
+++ b/src/lib/components/workspace/Knowledge/ItemMenu.svelte
@@ -46,23 +46,23 @@
 		<DropdownMenu className="min-w-[170px]">
 			{#if onExport}
 				<button
-					class="select-none 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 w-full"
+					class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					on:click={() => {
 						onExport();
 					}}
 				>
-					<Download />
+					<Download className="size-3.5" />
 					<div class="flex items-center">{$i18n.t('Export')}</div>
 				</button>
 			{/if}
 
 			<button
-				class="select-none 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 w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					dispatch('delete');
 				}}
 			>
-				<GarbageBin />
+				<GarbageBin className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
 		</DropdownMenu>
diff --git a/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte b/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte
index a70a45b87d..bb1443e14e 100644
--- a/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte
+++ b/src/lib/components/workspace/Prompts/PromptHistoryMenu.svelte
@@ -54,21 +54,21 @@
 			{#if isProduction}
 				<Tooltip content={$i18n.t('Cannot delete the production version')} placement="top">
 					<div
-						class="flex gap-2 items-center px-3 py-1.5 text-sm rounded-xl opacity-40 cursor-not-allowed"
+						class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] opacity-40 cursor-not-allowed"
 					>
-						<GarbageBin />
+						<GarbageBin className="size-3.5" />
 						<div class="flex items-center">{$i18n.t('Delete')}</div>
 					</div>
 				</Tooltip>
 			{:else}
 				<button
-					class="select-none 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 w-full"
+					class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					on:click={() => {
 						show = false;
 						showDeleteConfirmDialog = true;
 					}}
 				>
-					<GarbageBin />
+					<GarbageBin className="size-3.5" />
 					<div class="flex items-center">{$i18n.t('Delete')}</div>
 				</button>
 			{/if}
diff --git a/src/lib/components/workspace/Tools/AddToolMenu.svelte b/src/lib/components/workspace/Tools/AddToolMenu.svelte
index f4e66ed9d5..d4cd9416a1 100644
--- a/src/lib/components/workspace/Tools/AddToolMenu.svelte
+++ b/src/lib/components/workspace/Tools/AddToolMenu.svelte
@@ -33,27 +33,27 @@
 	<div slot="content">
 		<DropdownMenu className="min-w-[190px]">
 			<button
-				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 w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={async () => {
 					createHandler();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<Pencil />
+				<div class="self-center">
+					<Pencil className="size-3.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('New Tool')}</div>
 			</button>
 
 			<button
-				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 w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={async () => {
 					importFromLinkHandler();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<Link />
+				<div class="self-center">
+					<Link className="size-3.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Import From Link')}</div>
 			</button>