From 540ca8168b49fc1b4fbf4d63ec1f9cb2697dca45 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sun, 20 Sep 2026 14:48:10 +0200
Subject: [PATCH] ui : lay the backends out in the MCP server card grid

Assisted-by: pi:llama.cpp/DeepSeek-V4.1-Flash
---
 tools/ui/src/lib/components/app/backends/BackendCard.svelte | 2 +-
 .../src/lib/components/app/backends/SettingsBackends.svelte | 6 +++++-
 .../ui/src/lib/components/app/dialogs/DialogBackends.svelte | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/tools/ui/src/lib/components/app/backends/BackendCard.svelte b/tools/ui/src/lib/components/app/backends/BackendCard.svelte
index 2009343f83..018e0dfb58 100644
--- a/tools/ui/src/lib/components/app/backends/BackendCard.svelte
+++ b/tools/ui/src/lib/components/app/backends/BackendCard.svelte
@@ -60,7 +60,7 @@
 		</div>
 	</div>
 
-	<div class="mt-auto flex items-center justify-between gap-4">
+	<div class="flex items-center justify-between gap-4">
 		<div class="flex items-center gap-2">
 			<Switch checked={backend.enabled} onCheckedChange={(value) => onToggle?.(value)} />
 
diff --git a/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte b/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte
index d363e7397d..b6d0adf7eb 100644
--- a/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte
+++ b/tools/ui/src/lib/components/app/backends/SettingsBackends.svelte
@@ -40,7 +40,11 @@
 	}
 </script>
 
-<div in:fade={{ duration: 150 }} class={['grid gap-4', className]}>
+<div
+	in:fade={{ duration: 150 }}
+	class={['grid gap-4', className]}
+	style="grid-template-columns: repeat(auto-fill, minmax(min(25rem, calc(100dvw - 4rem)), 1fr));"
+>
 	<DialogBackendForm
 		bind:open={isAdding}
 		backend={editing}
diff --git a/tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte b/tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte
index 904099ea56..607c6633e7 100644
--- a/tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte
+++ b/tools/ui/src/lib/components/app/dialogs/DialogBackends.svelte
@@ -52,7 +52,7 @@
 
 			{#each PROTOCOL_TABS as tab (tab.value)}
 				<Tabs.Content class="min-h-0 flex-1 overflow-y-auto" value={tab.value}>
-					<SettingsBackends class="mx-auto w-full max-w-3xl" protocol={tab.value} />
+					<SettingsBackends protocol={tab.value} />
 				</Tabs.Content>
 			{/each}
 		</Tabs.Root>