diff --git a/frontend/src/lib/components/workspaceSettings/CustomInstanceDbSelect.svelte b/frontend/src/lib/components/workspaceSettings/CustomInstanceDbSelect.svelte
index 7e2f13c059..b785698394 100644
--- a/frontend/src/lib/components/workspaceSettings/CustomInstanceDbSelect.svelte
+++ b/frontend/src/lib/components/workspaceSettings/CustomInstanceDbSelect.svelte
@@ -15,12 +15,14 @@
 		instanceCatalogStatuses: ResourceReturn<GetCustomInstanceDbStatusResponse>
 		confirmationModal: ConfirmationModalHandle
 		dbManagerDrawer: DBManagerDrawer | undefined
+		class?: string
 	}
 	let {
 		value = $bindable(),
 		instanceCatalogStatuses,
 		confirmationModal,
-		dbManagerDrawer
+		dbManagerDrawer,
+		class: className
 	}: Props = $props()
 
 	let openedDbNameWizard = $state(false)
@@ -28,34 +30,36 @@
 	let status = $derived(instanceCatalogStatuses.current?.[value ?? ''])
 </script>
 
-<Select
-	class="flex-1"
-	inputClass="pr-20"
-	bind:value
-	onCreateItem={(i) => (value = i)}
-	placeholder="PostgreSQL database name"
-	items={safeSelectItems(Object.keys(instanceCatalogStatuses.current ?? {}))}
-	disabled={!$isCustomInstanceDbEnabled}
-/>
+<div class="flex relative items-center {className}">
+	<Select
+		class="flex-1"
+		inputClass="pr-20"
+		bind:value
+		onCreateItem={(i) => (value = i)}
+		placeholder="PostgreSQL database name"
+		items={safeSelectItems(Object.keys(instanceCatalogStatuses.current ?? {}))}
+		disabled={!$isCustomInstanceDbEnabled}
+	/>
 
-<Button
-	spacingSize="xs2"
-	variant="default"
-	wrapperClasses={'absolute right-1.5 h-6'}
-	onClick={() => (openedDbNameWizard = true)}
->
-	{#if !status}
-		<span class="text-yellow-600 dark:text-yellow-400">
-			Setup <ArrowRight class="inline" size={14} />
-		</span>
-	{:else if !status.success}
-		<span class="text-red-400 flex gap-1">
-			Error <TriangleAlert class="inline" size={16} />
-		</span>
-	{:else}
-		<div class="w-1.5 h-1.5 rounded-full bg-green-400"></div>
-	{/if}
-</Button>
+	<Button
+		spacingSize="xs2"
+		variant="default"
+		wrapperClasses={'absolute right-1.5 h-6'}
+		onClick={() => (openedDbNameWizard = true)}
+	>
+		{#if !status}
+			<span class="text-yellow-600 dark:text-yellow-400">
+				Setup <ArrowRight class="inline" size={14} />
+			</span>
+		{:else if !status.success}
+			<span class="text-red-400 flex gap-1">
+				Error <TriangleAlert class="inline" size={16} />
+			</span>
+		{:else}
+			<div class="w-1.5 h-1.5 rounded-full bg-green-400"></div>
+		{/if}
+	</Button>
+</div>
 
 <CustomInstanceDbWizardModal
 	{instanceCatalogStatuses}
diff --git a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
index 4fb249e6e4..73539af6a1 100644
--- a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
@@ -265,14 +265,16 @@
 								class="w-28"
 							/>
 						</div>
-						<div class="flex items-center gap-1 w-80 relative">
+						<div class="flex flex-1">
 							{#if ducklake.catalog.resource_type !== 'instance'}
 								<ResourcePicker
+									class="flex-1"
 									bind:value={ducklake.catalog.resource_path}
 									resourceType={ducklake.catalog.resource_type}
 								/>
 							{:else}
 								<CustomInstanceDbSelect
+									class="flex-1"
 									bind:value={ducklake.catalog.resource_path}
 									{instanceCatalogStatuses}
 									{confirmationModal}