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

---
 .../chat/FileNav/FileNavToolbar.svelte        |  4 +--
 .../chat/ModelSelector/ModelItemMenu.svelte   | 26 +++++++++----------
 src/lib/components/notes/RecordMenu.svelte    | 18 ++++++-------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/chat/FileNav/FileNavToolbar.svelte b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
index 500df39636..20b3c24b90 100644
--- a/src/lib/components/chat/FileNav/FileNavToolbar.svelte
+++ b/src/lib/components/chat/FileNav/FileNavToolbar.svelte
@@ -191,7 +191,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={() => onSort('name')}
 					>
 						<span class="flex-1 text-left">{$i18n.t('Name')}</span>
@@ -214,7 +214,7 @@
 					</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={() => onSort('date')}
 					>
 						<span class="flex-1 text-left">{$i18n.t('Date Modified')}</span>
diff --git a/src/lib/components/chat/ModelSelector/ModelItemMenu.svelte b/src/lib/components/chat/ModelSelector/ModelItemMenu.svelte
index 29667654b0..27e4bfe0bd 100644
--- a/src/lib/components/chat/ModelSelector/ModelItemMenu.svelte
+++ b/src/lib/components/chat/ModelSelector/ModelItemMenu.svelte
@@ -48,7 +48,7 @@
 			{#if model?.preset || model?.info?.base_model_id ? model?.info?.user_id === $user?.id : $user?.role === 'admin'}
 				<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"
+					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();
 						e.preventDefault();
@@ -61,7 +61,7 @@
 						show = false;
 					}}
 				>
-					<Pencil className="size-4" />
+					<Pencil className="size-3.5" />
 
 					<div class="flex items-center">{$i18n.t('Edit')}</div>
 				</button>
@@ -69,7 +69,7 @@
 				{#if $user?.role === 'admin' && model?.owned_by === 'ollama'}
 					<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"
+						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();
 							e.preventDefault();
@@ -84,7 +84,7 @@
 							viewBox="0 0 24 24"
 							stroke-width="1.5"
 							stroke="currentColor"
-							class="size-4"
+							class="size-3.5"
 						>
 							<path
 								stroke-linecap="round"
@@ -97,13 +97,13 @@
 					</button>
 				{/if}
 
-				<hr class="border-gray-50 dark:border-gray-800/30 my-1" />
+				<hr class="border-gray-50 dark:border-gray-800/30 mx-1 my-0.5" />
 			{/if}
 
 			<button
 				type="button"
 				aria-pressed={($settings?.pinnedModels ?? []).includes(model?.id)}
-				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"
+				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();
 					e.preventDefault();
@@ -113,9 +113,9 @@
 				}}
 			>
 				{#if ($settings?.pinnedModels ?? []).includes(model?.id)}
-					<PinSlash />
+					<PinSlash className="size-3.5" />
 				{:else}
-					<Pin />
+					<Pin className="size-3.5" />
 				{/if}
 
 				<div class="flex items-center">
@@ -129,7 +129,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"
+				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();
 					e.preventDefault();
@@ -138,17 +138,17 @@
 					show = false;
 				}}
 			>
-				<Link />
+				<Link className="size-3.5" />
 
 				<div class="flex items-center">{$i18n.t('Copy Link')}</div>
 			</button>
 
 			{#if $config?.features.enable_community_sharing}
-				<hr class="border-gray-50 dark:border-gray-800/30 my-1" />
+				<hr class="border-gray-50 dark:border-gray-800/30 mx-1 my-0.5" />
 
 				<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"
+					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();
 						e.preventDefault();
@@ -160,7 +160,7 @@
 						show = false;
 					}}
 				>
-					<GlobeAlt className="size-4" />
+					<GlobeAlt className="size-3.5" />
 
 					<div class="flex items-center">{$i18n.t('Community Reviews')}</div>
 				</button>
diff --git a/src/lib/components/notes/RecordMenu.svelte b/src/lib/components/notes/RecordMenu.svelte
index 7fc69d82bd..dc78666371 100644
--- a/src/lib/components/notes/RecordMenu.svelte
+++ b/src/lib/components/notes/RecordMenu.svelte
@@ -31,40 +31,40 @@
 	<div slot="content">
 		<DropdownMenu className="min-w-[170px] font-primary">
 			<button
-				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				class="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={async () => {
 					onRecord();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<Mic className="size-4" strokeWidth="2" />
+				<div class="self-center">
+					<Mic className="size-3.5" strokeWidth="2" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Record')}</div>
 			</button>
 
 			<button
-				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				class="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={() => {
 					onCaptureAudio();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<CursorArrowRays className="size-4" strokeWidth="2" />
+				<div class="self-center">
+					<CursorArrowRays className="size-3.5" strokeWidth="2" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Capture Audio')}</div>
 			</button>
 
 			<button
-				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				class="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={() => {
 					onUpload();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<CloudArrowUp className="size-4" strokeWidth="2" />
+				<div class="self-center">
+					<CloudArrowUp className="size-3.5" strokeWidth="2" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Upload Audio')}</div>
 			</button>