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>