From c4cd2b55f0399a567d2dd6f6326f871fa5c59474 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 10 Jun 2025 14:13:52 +0400
Subject: [PATCH 1/2] refac: styling

---
 src/lib/components/chat/ModelSelector/Selector.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index dc4e108df..7c1251106 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -410,10 +410,10 @@
 				</div>
 			{/if}
 
-			<div class="px-3 max-h-64 overflow-y-auto group relative">
+			<div class="px-3">
 				{#if tags && items.filter((item) => !(item.model?.info?.meta?.hidden ?? false)).length > 0}
 					<div
-						class=" flex w-full sticky top-0 z-10 bg-white dark:bg-gray-850 overflow-x-auto scrollbar-none"
+						class=" flex w-full bg-white dark:bg-gray-850 overflow-x-auto scrollbar-none"
 						on:wheel={(e) => {
 							if (e.deltaY !== 0) {
 								e.preventDefault();
@@ -495,7 +495,9 @@
 						</div>
 					</div>
 				{/if}
+			</div>
 
+			<div class="px-3 max-h-64 overflow-y-auto group relative">
 				{#each filteredItems as item, index}
 					<ModelItem
 						{selectedModelIdx}

From f67f86f06fa2cb230c32c6ccc73910e783735fce Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 10 Jun 2025 14:33:49 +0400
Subject: [PATCH 2/2] refac: styling

---
 src/lib/components/layout/Sidebar.svelte | 80 ++++++++++++------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 421038baf..e456c303a 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -645,51 +645,51 @@
 			</div>
 		{/if}
 
-		{#if ($models ?? []).length > 0 && ($settings?.pinnedModels ?? []).length > 0}
-			<div class="py-1">
-				{#each $settings.pinnedModels as modelId (modelId)}
-					{@const model = $models.find((model) => model.id === modelId)}
-					{#if model}
-						<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
-							<a
-								class="grow flex items-center space-x-2.5 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
-								href="/?model={modelId}"
-								on:click={() => {
-									selectedChatId = null;
-									chatId.set('');
-
-									if ($mobile) {
-										showSidebar.set(false);
-									}
-								}}
-								draggable="false"
-							>
-								<div class="self-center shrink-0">
-									<img
-										crossorigin="anonymous"
-										src={model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
-										class=" size-5 rounded-full -translate-x-[0.5px]"
-										alt="logo"
-									/>
-								</div>
-
-								<div class="flex self-center translate-y-[0.5px]">
-									<div class=" self-center font-medium text-sm font-primary line-clamp-1">
-										{model?.name ?? modelId}
-									</div>
-								</div>
-							</a>
-						</div>
-					{/if}
-				{/each}
-			</div>
-		{/if}
-
 		<div
 			class="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden {$temporaryChatEnabled
 				? 'opacity-20'
 				: ''}"
 		>
+			{#if ($models ?? []).length > 0 && ($settings?.pinnedModels ?? []).length > 0}
+				<div class="mt-0.5">
+					{#each $settings.pinnedModels as modelId (modelId)}
+						{@const model = $models.find((model) => model.id === modelId)}
+						{#if model}
+							<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
+								<a
+									class="grow flex items-center space-x-2.5 rounded-lg px-2 py-[7px] hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+									href="/?model={modelId}"
+									on:click={() => {
+										selectedChatId = null;
+										chatId.set('');
+
+										if ($mobile) {
+											showSidebar.set(false);
+										}
+									}}
+									draggable="false"
+								>
+									<div class="self-center shrink-0">
+										<img
+											crossorigin="anonymous"
+											src={model?.info?.meta?.profile_image_url ?? '/static/favicon.png'}
+											class=" size-5 rounded-full -translate-x-[0.5px]"
+											alt="logo"
+										/>
+									</div>
+
+									<div class="flex self-center translate-y-[0.5px]">
+										<div class=" self-center font-medium text-sm font-primary line-clamp-1">
+											{model?.name ?? modelId}
+										</div>
+									</div>
+								</a>
+							</div>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+
 			{#if $config?.features?.enable_channels && ($user?.role === 'admin' || $channels.length > 0)}
 				<Folder
 					className="px-2 mt-0.5"