From 46eb0a98ee25f0e9c857e006e53b36d358670369 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Thu, 24 Sep 2026 10:01:08 +0200
Subject: [PATCH] ui : line the section chevron up with the family chevrons

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 .../lib/components/app/misc/CollapsibleSection.svelte |  5 ++++-
 .../ModelsManager/ModelsManagerModelsTable.svelte     |  1 +
 .../lib/components/app/models/ModelsSection.svelte    | 11 ++++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte b/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte
index 2e9202cf29..91dd003381 100644
--- a/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte
+++ b/tools/ui/src/lib/components/app/misc/CollapsibleSection.svelte
@@ -17,6 +17,8 @@
 		defaultOpen?: boolean;
 		/** Controlled open state, for a caller that binds it. */
 		open?: boolean;
+		/** Extra classes for the chevron, to line it up with a row's own control. */
+		chevronClass?: string;
 		/** Hide the chevron while expanded, until the trigger is hovered. */
 		revealChevronOnHover?: boolean;
 		/** Where the trigger sits relative to the content. */
@@ -26,6 +28,7 @@
 	}
 
 	let {
+		chevronClass = '',
 		children,
 		defaultOpen = true,
 		inMenu = false,
@@ -40,7 +43,7 @@
 
 {#snippet chevron()}
 	<span
-		class="ml-auto shrink-0 text-muted-foreground {open && revealChevronOnHover
+		class="ml-auto shrink-0 text-muted-foreground {chevronClass} {open && revealChevronOnHover
 			? 'opacity-0 group-hover:opacity-100'
 			: ''}"
 	>
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 dfb565eb3b..0af572fad8 100644
--- a/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsManager/ModelsManagerModelsTable.svelte
@@ -547,6 +547,7 @@
 
 				<ModelsSection
 					backendId={group.kind === 'provider' ? (group.backendId ?? undefined) : undefined}
+					chevronClass="mr-7"
 					count={group.items.length}
 					defaultOpen={group.kind !== 'hidden'}
 					icon={group.kind === 'provider' ? undefined : groupIcon}
diff --git a/tools/ui/src/lib/components/app/models/ModelsSection.svelte b/tools/ui/src/lib/components/app/models/ModelsSection.svelte
index 0efb436410..d42ec20267 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSection.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSection.svelte
@@ -10,6 +10,8 @@
 		children: Snippet;
 		/** Renders the backend's logo in the header. */
 		backendId?: string;
+		/** Extra classes for the chevron, to line it up with a row's own control. */
+		chevronClass?: string;
 		/** Number shown next to the label, omitted when undefined. */
 		count?: number;
 		error?: boolean;
@@ -31,6 +33,7 @@
 
 	let {
 		backendId,
+		chevronClass = '',
 		children,
 		count,
 		defaultOpen = true,
@@ -52,7 +55,13 @@
 	let triggerStyle = $derived(sticky ? 'top: var(--dropdown-sticky-height, 0px)' : '');
 </script>
 
-<CollapsibleSection {defaultOpen} {revealChevronOnHover} {triggerClass} {triggerStyle}>
+<CollapsibleSection
+	{chevronClass}
+	{defaultOpen}
+	{revealChevronOnHover}
+	{triggerClass}
+	{triggerStyle}
+>
 	{#snippet trigger()}
 		{#if onBack}
 			<button