From f36d52fc50a5e43217a8082824bc881968e30faa Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Wed, 23 Sep 2026 14:39:52 +0200
Subject: [PATCH] ui : tighten the model rows nested under a family

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../ModelsManagerModelsTable.svelte           | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte
index 38a76b5daa..3d79bd480a 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte
@@ -183,7 +183,7 @@
 	/>
 {/snippet}
 
-{#snippet row(option: ModelOption, indent = 0)}
+{#snippet row(option: ModelOption, indent = 0, compact = false)}
 	{@const isLoaded = isLoadedOption(option)}
 	{@const favorite = isFavorite(option)}
 	{@const canLoad = getBackendCapabilities(getBackend(option.backendId)).loadUnload}
@@ -193,7 +193,8 @@
 	<div
 		class={[
 			rowGrid,
-			'cursor-pointer rounded-md px-2 py-2.5 transition',
+			'cursor-pointer rounded-md px-2 transition',
+			compact ? 'py-2' : 'py-2.5',
 			isHidden && 'opacity-60',
 			selectedId === option.id ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/40'
 		]}
@@ -207,7 +208,7 @@
 				{option}
 				showBaseModelAvatar={!settingsStore.config.groupModelsByFamily}
 				showRepoOrgAvatar={settingsStore.config.groupModelsByFamily}
-				size="size-9"
+				size={compact ? 'size-7' : 'size-9'}
 			/>
 
 			<ModelId
@@ -242,7 +243,7 @@
 	<!-- </div> -->
 {/snippet}
 
-{#snippet repoRow(entry: ModelQuantGroup, indent = 0)}
+{#snippet repoRow(entry: ModelQuantGroup, indent = 0, compact = false)}
 	{@const isExpanded = !collapsedQuants.has(entry.key)}
 	{@const groupLabel =
 		entry.kind === 'variants'
@@ -252,7 +253,11 @@
 
 	<div class="px-2">
 		<div
-			class={[rowGrid, 'cursor-pointer rounded-md px-2 py-2.5 transition hover:bg-muted/40']}
+			class={[
+				rowGrid,
+				'cursor-pointer rounded-md px-2 transition hover:bg-muted/40',
+				compact ? 'py-2' : 'py-2.5'
+			]}
 			onclick={() => toggleQuants(entry.key)}
 			onkeydown={(event) => event.key === 'Enter' && toggleQuants(entry.key)}
 			role="button"
@@ -263,7 +268,7 @@
 					option={entry.base}
 					showBaseModelAvatar={!settingsStore.config.groupModelsByFamily}
 					showRepoOrgAvatar={settingsStore.config.groupModelsByFamily}
-					size="size-9"
+					size={compact ? 'size-7' : 'size-9'}
 				/>
 
 				<span class="min-w-0">
@@ -306,7 +311,7 @@
 	</div>
 {/snippet}
 
-{#snippet quantRow(option: ModelOption, indent = 0)}
+{#snippet quantRow(option: ModelOption, indent = 0, compact = false)}
 	{@const favorite = isFavorite(option)}
 	{@const canLoad = getBackendCapabilities(getBackend(option.backendId)).loadUnload}
 	{@const isLoaded = isLoadedOption(option)}
@@ -317,7 +322,8 @@
 		<div
 			class={[
 				rowGrid,
-				'cursor-pointer rounded-md px-2 py-2 transition',
+				'cursor-pointer rounded-md px-2 transition',
+				compact ? 'py-1.5' : 'py-2',
 				isHidden && 'opacity-60',
 				selectedId === option.id ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/40'
 			]}
@@ -352,17 +358,17 @@
 	</div>
 {/snippet}
 
-{#snippet entryTree(entry: ModelQuantGroup, indent = 0)}
+{#snippet entryTree(entry: ModelQuantGroup, indent = 0, compact = false)}
 	{#if entry.quants.length > 1}
-		{@render repoRow(entry, indent)}
+		{@render repoRow(entry, indent, compact)}
 
 		{#if !collapsedQuants.has(entry.key)}
 			{#each entry.quants as quant (quant.id)}
-				{@render quantRow(quant, indent + 24)}
+				{@render quantRow(quant, indent + 24, compact)}
 			{/each}
 		{/if}
 	{:else}
-		{@render row(entry.base, indent)}
+		{@render row(entry.base, indent, compact)}
 	{/if}
 {/snippet}
 
@@ -445,8 +451,8 @@
 	</div>
 {/snippet}
 
-{#snippet listItem({ entry }: { entry: ModelQuantGroup })}
-	{@render entryTree(entry, 16)}
+{#snippet listItem({ depth, entry }: { depth: number; entry: ModelQuantGroup })}
+	{@render entryTree(entry, depth > 0 ? 16 : 0, depth > 0)}
 {/snippet}
 
 {#snippet showMore({