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] 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"