From e0a8649e525e8c7d3b2587ba53798532970d2891 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Wed, 16 Sep 2026 19:08:40 +0200
Subject: [PATCH] ui : lighten the model selector rows

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../models/ModelsSelector/ModelsSelectorOption.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
index 1be2a105c9..37bc8bf93b 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelector/ModelsSelectorOption.svelte
@@ -108,6 +108,8 @@
 	class={[
 		'group relative flex w-full items-center gap-2 rounded-sm p-2 text-left text-sm transition focus:outline-none',
 		'cursor-pointer',
+		// skip layout and paint for rows scrolled out of the long lists
+		'[content-visibility:auto] [contain-intrinsic-size:auto_2.25rem]',
 		isSelected && !isHighlighted && 'bg-accent/50',
 		isHighlighted && 'bg-accent',
 		(isSelected || isHighlighted) && 'text-accent-foreground',
@@ -139,10 +141,10 @@
 		{hideOrgName}
 		{modalities}
 		modelId={option.model}
-		showRawTooltip
 		supportsThinking={capabilities.reasoning}
 		supportsToolUse={capabilities.tools}
 		tags={option.tags}
+		title={option.model}
 	/>
 
 	<div class="flex shrink-0 items-center gap-1">
@@ -159,6 +161,7 @@
 					iconSize="h-2.5 w-2.5"
 					onclick={() => modelsStore.toggleFavorite(option.model)}
 					tooltip="Remove from favorites"
+					tooltipAsTitle
 				/>
 			{:else}
 				<ActionIcon
@@ -167,6 +170,7 @@
 					iconSize="h-2.5 w-2.5"
 					onclick={() => modelsStore.toggleFavorite(option.model)}
 					tooltip="Add to favorites"
+					tooltipAsTitle
 				/>
 			{/if}
 
@@ -178,6 +182,7 @@
 					iconSize="h-2.5 w-2.5"
 					onclick={() => onInfoClick(option.model)}
 					tooltip="Model information"
+					tooltipAsTitle
 				/>
 			{/if}
 		</div>
@@ -200,6 +205,7 @@
 						onclick={() => modelsStore.status.load(option.model)}
 						stopPropagationOnClick
 						tooltip="Retry loading model"
+						tooltipAsTitle
 					/>
 				</div>
 			</div>
@@ -219,6 +225,7 @@
 							modelsStore.status.unload(option.model);
 						}}
 						tooltip="Unload model"
+						tooltipAsTitle
 					/>
 				</div>
 			</div>
@@ -236,6 +243,7 @@
 						onclick={() => modelsStore.status.unload(option.model)}
 						stopPropagationOnClick
 						tooltip="Unload model"
+						tooltipAsTitle
 					/>
 				</div>
 			</div>
@@ -253,6 +261,7 @@
 						onclick={() => modelsStore.status.load(option.model)}
 						stopPropagationOnClick
 						tooltip="Load model"
+						tooltipAsTitle
 					/>
 				</div>
 			</div>