From 8f07c0c8eec4e64467253fbb5d3bff5763cf2878 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 13 Jul 2026 23:34:54 -0400
Subject: [PATCH] refac

---
 .../chat/ModelSelector/ModelItem.svelte       |  2 +-
 .../chat/ModelSelector/Selector.svelte        | 12 +++++------
 src/lib/components/layout/Sidebar.svelte      | 20 +++++++++----------
 src/lib/stores/index.ts                       |  2 +-
 uv.lock                                       |  1 +
 5 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/ModelItem.svelte b/src/lib/components/chat/ModelSelector/ModelItem.svelte
index f143ebc38a..8b0798a1fc 100644
--- a/src/lib/components/chat/ModelSelector/ModelItem.svelte
+++ b/src/lib/components/chat/ModelSelector/ModelItem.svelte
@@ -49,7 +49,7 @@
 	role="option"
 	aria-selected={value === item.value}
 	aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}
-	class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted {index ===
+	class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-[7px] pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted {index ===
 	selectedModelIdx
 		? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
 		: ''}"
diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index d7645cc2b6..dfb1f96368 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -474,7 +474,7 @@
 		deleteModelTarget = null;
 	};
 
-	const ITEM_HEIGHT = 42;
+	const ITEM_HEIGHT = 39;
 	const OVERSCAN = 10;
 
 	let listScrollTop = 0;
@@ -558,7 +558,7 @@
 			>
 				<slot>
 					{#if searchEnabled}
-						<div class="flex items-center gap-2.5 px-4.5 pt-3.5 mb-1.5">
+						<div class="flex items-center gap-2 px-3.5 pt-3 mb-1.5">
 							<Search className="size-4" strokeWidth="2.5" />
 
 							<input
@@ -695,7 +695,7 @@
 						{/if}
 					</div>
 
-					<div class="px-2.5 group relative">
+					<div class="px-2 group relative">
 						{#if filteredItems.length === 0}
 							{#if items.length === 0 && $user?.role === 'admin'}
 								<div class="flex flex-col items-start justify-center py-6 px-4 text-start">
@@ -765,7 +765,7 @@
 								placement="top-start"
 							>
 								<button
-									class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted"
+									class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-[7px] pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted"
 									on:click={() => {
 										pullModelHandler();
 									}}
@@ -781,7 +781,7 @@
 
 						{#each selectionOnly ? [] : Object.keys($MODEL_DOWNLOAD_POOL) as model}
 							<div
-								class="flex w-full justify-between font-medium select-none rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 rounded-xl cursor-pointer data-highlighted:bg-muted"
+								class="flex w-full justify-between font-medium select-none rounded-button py-[7px] pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 rounded-xl cursor-pointer data-highlighted:bg-muted"
 							>
 								<div class="flex">
 									<div class="mr-2.5 translate-y-0.5">
@@ -842,7 +842,7 @@
 						{/each}
 					</div>
 
-					<div class="pb-2.5"></div>
+					<div class="pb-2"></div>
 
 					<div class="hidden w-[42rem]" />
 					<div class="hidden w-[32rem]" />
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index fcca04c9b8..961027c8bf 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -526,7 +526,7 @@
 		isResizing = true;
 
 		startClientX = e.clientX;
-		startWidth = $sidebarWidth ?? 240;
+		startWidth = $sidebarWidth ?? 250;
 
 		document.body.style.userSelect = 'none';
 	};
@@ -1047,7 +1047,7 @@
 				: 'invisible'}"
 		>
 			<div
-				class="sidebar px-1.5 pt-1.5 pb-1 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-2"
+				class="sidebar px-1.5 pt-2 pb-1.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-3"
 			>
 				<a
 					class="flex items-center rounded-xl size-8.5 h-full justify-center hover:bg-gray-100/50 dark:hover:bg-gray-850/50 transition no-drag-region"
@@ -1098,7 +1098,7 @@
 			</div>
 
 			<div
-				class="relative flex flex-col flex-1 overflow-y-auto scrollbar-hidden pt-2 pb-2"
+				class="relative flex flex-col flex-1 overflow-y-auto scrollbar-hidden pt-3 pb-3"
 				on:scroll={(e) => {
 					if (e.target.scrollTop === 0) {
 						scrollTop = 0;
@@ -1107,11 +1107,11 @@
 					}
 				}}
 			>
-				<div class="pb-1">
+				<div class="pb-1.5">
 					<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
 						<a
 							id="sidebar-new-chat-button"
-							class="group grow flex items-center space-x-2.5 rounded-xl px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
+							class="group grow flex items-center space-x-2.5 rounded-xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
 							href="/"
 							draggable="false"
 							on:click={newChatHandler}
@@ -1132,7 +1132,7 @@
 					<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
 						<button
 							id="sidebar-search-button"
-							class="group grow flex items-center space-x-2.5 rounded-xl px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
+							class="group grow flex items-center space-x-2.5 rounded-xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition outline-none"
 							on:click={() => {
 								showSearch.set(true);
 							}}
@@ -1160,7 +1160,7 @@
 								>
 									<a
 										id="sidebar-{itemId}-button"
-										class="grow flex items-center space-x-2.5 rounded-xl px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+										class="grow flex items-center space-x-2.5 rounded-xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 										href={meta.href}
 										on:click={itemClickHandler}
 										draggable="false"
@@ -1524,7 +1524,7 @@
 											class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx ===
 											0
 												? ''
-												: 'pt-4'} pb-1"
+												: 'pt-5'} pb-1.5"
 										>
 											{$i18n.t(chat.time_range)}
 											<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
@@ -1602,7 +1602,7 @@
 				</Folder>
 			</div>
 
-			<div class="px-1.5 pt-1 pb-1.5 sticky bottom-0 z-10 -mt-2 sidebar">
+			<div class="px-1.5 pt-1.5 pb-2 sticky bottom-0 z-10 -mt-3 sidebar">
 				<div
 					class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
 				></div>
@@ -1621,7 +1621,7 @@
 						>
 							<button
 								type="button"
-								class=" flex items-center rounded-xl py-1.5 px-1.5 w-full hover:bg-gray-100/50 dark:hover:bg-gray-900/50 transition"
+								class=" flex items-center rounded-xl py-2 px-1.5 w-full hover:bg-gray-100/50 dark:hover:bg-gray-900/50 transition"
 								aria-label={$i18n.t('User menu')}
 							>
 								<div class=" self-center mr-3 relative flex-shrink-0">
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index c8c27a9060..477f571c44 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -88,7 +88,7 @@ export const chatRequestQueues: Writable<
 	Record<string, { id: string; prompt: string; files: any[] }[]>
 > = writable({});
 
-export const sidebarWidth = writable(240);
+export const sidebarWidth = writable(250);
 
 export const showSidebar = writable(false);
 export const showSearch = writable(false);
diff --git a/uv.lock b/uv.lock
index a2ec079ad3..f68b6ffc5f 100644
--- a/uv.lock
+++ b/uv.lock
@@ -2966,6 +2966,7 @@ wheels = [
 
 [[package]]
 name = "open-webui"
+version = "0.9.6"
 source = { editable = "." }
 dependencies = [
     { name = "accelerate" },