From 218489098329539ae9b538db6d3ab48281e4b2d0 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Wed, 2 Sep 2026 19:55:45 +0200
Subject: [PATCH] ui : polish model selector spacing and avatar sizing

Assisted-by: pi
---
 .../app/models/ModelsSelectorDropdown.svelte      | 15 ++++++++++-----
 .../app/models/ModelsSelectorOption.svelte        |  8 ++++----
 .../models/ModelsSelectorReasoningPanel.svelte    |  2 +-
 .../ModelsDiscoverModelDetailsReadme.svelte       |  4 +++-
 .../app/navigation/DropdownMenuSearchable.svelte  |  2 +-
 5 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
index a94900cf9b..fafbed0e90 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
@@ -71,8 +71,8 @@
 
 	// Params badge fallback for trigger ids that carry no params token.
 	const { paramsFallback } = useModelParamsFallback({
-		modelId: () => triggerModel,
-		metaParams: () => selectedOption?.meta?.n_params
+		metaParams: () => selectedOption?.meta?.n_params,
+		modelId: () => triggerModel
 	});
 
 	const showOrgNameInTrigger = $derived(
@@ -264,7 +264,7 @@
 
 				<DropdownMenu.Content
 					align="end"
-					class="w-full md:min-w-80 md:max-w-[26rem] max-w-[calc(100vw-2rem)] !py-0"
+					class="w-full md:min-w-80 md:max-w-[26rem] max-w-[calc(100vw-2rem)] p-0!"
 					onOpenAutoFocus={(event) => event.preventDefault()}
 				>
 					<DropdownMenuSearchable
@@ -278,7 +278,7 @@
 					>
 						<!-- Option list; the search header sticks to the top and the actions
 						     footer to the bottom of the content scrollport. -->
-						<div class="models-list">
+						<div class="models-list px-1.5">
 							{#if !ms.isCurrentModelInCache && currentModel}
 								<!-- Show unavailable model as first option (disabled) -->
 								<button
@@ -338,7 +338,12 @@
 						{#snippet footer()}
 							<!-- Sticky actions footer: reasoning effort panel.
 							     Sticks to the bottom of the content scrollport. -->
-							<div onfocusin={clearHighlight} onmouseenter={clearHighlight} role="none">
+							<div
+								class="px-1.5"
+								onfocusin={clearHighlight}
+								onmouseenter={clearHighlight}
+								role="none"
+							>
 								<ModelsSelectorReasoningPanel />
 							</div>
 						{/snippet}
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
index 5714312820..c1b1bbc6f7 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
@@ -14,8 +14,8 @@
 	import { ActionIcon, ModelId } from '$lib/components/app';
 	import { HF_BASE_MODEL_TAG_REGEX, ICON_CLASS_DEFAULT, PATH_SEPARATOR } from '$lib/constants';
 	import { ModelCapability, ServerModelStatus } from '$lib/enums';
-	import { HuggingFaceService, ModelsService } from '$lib/services';
 	import { useModelParamsFallback } from '$lib/hooks/use-model-params-fallback.svelte';
+	import { HuggingFaceService, ModelsService } from '$lib/services';
 	import { modelsStore } from '$lib/stores';
 	import type { ModelOption } from '$lib/types/models';
 	import { modelLoadFraction, modelLoadProgressText } from '$lib/utils';
@@ -101,8 +101,8 @@
 	}));
 
 	const { paramsFallback } = useModelParamsFallback({
-		modelId: () => option.model,
-		metaParams: () => option.meta?.n_params
+		metaParams: () => option.meta?.n_params,
+		modelId: () => option.model
 	});
 </script>
 
@@ -132,7 +132,7 @@
 			quantOrg={showBaseModelAvatar ? orgName : undefined}
 			quantPositionClass="-bottom-1 -right-1"
 			quantSize="h-3 w-3"
-			size="h-6 w-6"
+			size="size-5"
 		/>
 	{/if}
 
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte
index 005678a60e..cc52012e1b 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorReasoningPanel.svelte
@@ -20,7 +20,7 @@
 	     through the `child` snippet to keep Collapsible.Trigger's native button.
 	     closeOnSelect keeps the menu open while the effort list is being used. -->
 	<DropdownMenu.Item
-		class="w-full min-w-0 cursor-pointer items-center gap-2 py-2 rounded-md text-left text-sm"
+		class="w-full min-w-0 cursor-pointer items-center gap-2 rounded-md text-left text-sm"
 		closeOnSelect={false}
 	>
 		{#snippet child({ props })}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte
index 1fcd36dd96..3d000ec5a4 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsReadme.svelte
@@ -9,7 +9,9 @@
 </script>
 
 {#if readme}
-	<section class="bg-muted/50 p-3 rounded-xl">
+	<section
+		class="p-3 rounded-3xl border border-border/30 bg-muted/60 shadow-xs dark:border-border/20"
+	>
 		<MarkdownContent allowHtml class="prose-sm max-w-none" content={readme} />
 	</section>
 {/if}
diff --git a/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte b/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
index b20e086a46..bd9a040060 100644
--- a/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
+++ b/tools/ui/src/lib/components/app/navigation/DropdownMenuSearchable.svelte
@@ -38,7 +38,7 @@
 </script>
 
 <!-- Sticks to the top of the dropdown content's scrollport. -->
-<div class="sticky top-0 z-20 px-1 pb-2 pt-2">
+<div class="sticky top-0 z-20 p-1.5">
 	<SearchInput
 		bind:value={searchValue}
 		class={searchClass}