diff --git a/frontend/src/lib/components/AIProviderPicker.svelte b/frontend/src/lib/components/AIProviderPicker.svelte
index 8979de8915..e6c4d345c9 100644
--- a/frontend/src/lib/components/AIProviderPicker.svelte
+++ b/frontend/src/lib/components/AIProviderPicker.svelte
@@ -148,7 +148,7 @@
 <div class="w-full flex flex-col gap-3">
 	<!-- Provider Selection -->
 	<div class="flex flex-col gap-2">
-		<ToggleButtonGroup selected={value?.kind} onSelected={onProviderChange} {disabled}>
+		<ToggleButtonGroup selected={value?.kind} onSelected={onProviderChange} {disabled} wrap>
 			{#snippet children({ item })}
 				{#each providerOptions as option}
 					<ToggleButton value={option.value} label={option.label} {item} />
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 8548a41012..d7a2b5f6b8 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -14,6 +14,7 @@
 		tabListClass?: string
 		allowEmpty?: boolean
 		class?: string
+		wrap?: boolean
 		children?: import('svelte').Snippet<[any]>
 		onSelected?: (value: any) => void
 	}
@@ -26,6 +27,7 @@
 		tabListClass = '',
 		allowEmpty = false,
 		class: className = '',
+		wrap = false,
 		onSelected,
 		children
 	}: Props = $props()
@@ -70,7 +72,8 @@
 >
 	<div
 		class={twMerge(
-			'flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full flex-wrap',
+			'flex bg-surface-secondary rounded-md p-0.5 gap-1 h-full',
+			wrap ? 'flex-wrap' : '',
 			tabListClass
 		)}
 	>