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

@@ -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)} />
 

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}

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>