improve layout

src/lib/components/inference-playground/model-selector.svelte

@@ -41,16 +41,18 @@
 	<button
 		{id}
 		class={cn(
-			"focus-outline relative flex items-center gap-2 overflow-hidden rounded-lg border",
+			"focus-outline relative flex w-full items-center justify-between overflow-hidden rounded-lg border",
 			"bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
 			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
 		)}
 		onclick={() => (showModelPickerModal = true)}
 	>
-		<Avatar model={conversation.model} orgName={nameSpace} size="sm" />
-		<div class="overflow-hidden">
-			<span class="text-xs text-gray-500 dark:text-gray-400">{nameSpace}/</span>
-			<span class="truncate font-medium">{modelName}</span>
+		<div class="flex items-center gap-2 overflow-hidden">
+			<Avatar model={conversation.model} orgName={nameSpace} size="sm" />
+			<div class="overflow-hidden">
+				<span class="text-xs text-gray-500 dark:text-gray-400">{nameSpace}/</span>
+				<span class="truncate font-medium">{modelName}</span>
+			</div>
 		</div>
 		<IconCaret class="size-4 flex-none text-gray-500" />
 	</button>

src/lib/components/inference-playground/playground.svelte

@@ -118,8 +118,8 @@
 			<!-- Left side: Model selector, provider selector, and compare -->
 			<div class="flex items-center gap-3">
 				{#if !compareActive && conversations.active[0]}
-					<!-- Model and provider stacked vertically -->
-					<div class="flex flex-col gap-1">
+					<!-- Model and provider stacked vertically with fixed width -->
+					<div class="flex w-72 flex-col gap-1">
 						<ModelSelector conversation={conversations.active[0]} compact />
 						{#if isHFModel(conversations.active[0].model)}
 							<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->

src/lib/components/inference-playground/provider-select.svelte

@@ -21,7 +21,6 @@
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
 		const validProvider = providers.find(p => p.provider === conversation.data.provider);
 		if (validProvider || conversation.data.provider === "auto") return;
-		// Default to auto provider if no valid provider is set
 		conversation.update({ provider: "auto", autoPolicy: "default" });
 	}
 
@@ -55,18 +54,14 @@
 
 	function formatName(provider: string) {
 		if (provider in nameMap) return nameMap[provider];
-
 		const words = provider
 			.toLowerCase()
 			.split("-")
-			.map(word => {
-				if (UPPERCASE_WORDS.includes(word)) {
-					return word.toUpperCase();
-				} else {
-					return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-				}
-			});
-
+			.map(word =>
+				UPPERCASE_WORDS.includes(word)
+					? word.toUpperCase()
+					: word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(),
+			);
 		return words.join(" ");
 	}
 
@@ -101,140 +96,95 @@
 			conversation.update({ autoPolicy: v });
 		},
 	});
+
+	// Shared button styles
+	const triggerClass = cn(
+		"focus-outline relative flex items-center justify-between overflow-hidden rounded-lg border",
+		"bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
+		"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+	);
+
+	const dropdownClass = "z-50 rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800";
 </script>
 
-{#snippet providerDisplay(provider: string, showPricing: boolean = true)}
+{#snippet providerOption(provider: string, showPricing: boolean = true)}
 	{@const providerPricing = getProviderPricing(provider)}
-	<div class="flex flex-col items-start gap-0.5">
-		<div class="flex items-center gap-2 text-sm">
-			<IconProvider {provider} />
-			<span>{getProviderName(provider) ?? "loading"}</span>
+	<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
+		<div class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700">
+			<div class="flex items-center gap-2">
+				<IconProvider {provider} />
+				<span>{getProviderName(provider)}</span>
+			</div>
+			{#if showPricing && providerPricing}
+				<span class="text-xs text-gray-500 dark:text-gray-400">
+					In: {providerPricing.input} • Out: {providerPricing.output}
+				</span>
+			{/if}
 		</div>
-		{#if showPricing && providerPricing}
-			<span class="text-xs text-gray-500 dark:text-gray-400">
-				In: {providerPricing.input} • Out: {providerPricing.output}
-			</span>
-		{/if}
 	</div>
 {/snippet}
 
-{#snippet compactProviderDisplay(provider: string)}
-	<div class="flex items-center gap-1.5">
-		<IconProvider {provider} />
-		<span class="text-sm">{getProviderName(provider) ?? "loading"}</span>
+{#snippet policyOption(policy: AutoPolicy)}
+	<div {...autoPolicySelect.getOption(policy)} class="group block w-full p-1 text-sm dark:text-white">
+		<div class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700">
+			<span>{autoPolicyLabels[policy]}</span>
+			<span class="block text-xs text-gray-500 dark:text-gray-400">{autoPolicyDescriptions[policy]}</span>
+		</div>
 	</div>
 {/snippet}
 
 {#if compact}
-	<!-- Compact mode for top bar - provider and auto policy side by side -->
+	<!-- Compact mode: provider and auto-policy side by side, filling width -->
 	<div class="flex items-center gap-2">
-		<!-- Provider select -->
-		<button
-			{...select.trigger}
-			class={cn(
-				"focus-outline relative flex items-center gap-2 overflow-hidden rounded-lg border",
-				"bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
-				"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
-				classes,
-			)}
-		>
-			{@render compactProviderDisplay(conversation.data.provider ?? "")}
+		<button {...select.trigger} class={cn(triggerClass, "flex-1", classes)}>
+			<div class="flex items-center gap-1.5">
+				<IconProvider provider={conversation.data.provider ?? ""} />
+				<span>{getProviderName(conversation.data.provider ?? "")}</span>
+			</div>
 			<IconCaret class="size-4 flex-none text-gray-500" />
 		</button>
 
-		<div {...select.content} class="z-50 rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-			{#snippet option(provider: string)}
-				<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
-					<div
-						class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
-					>
-						{@render providerDisplay(provider)}
-					</div>
-				</div>
-			{/snippet}
+		<div {...select.content} class={dropdownClass}>
 			{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
-				{@render option(provider)}
+				{@render providerOption(provider)}
 			{/each}
-			{@render option("auto")}
+			{@render providerOption("auto")}
 		</div>
 
-		<!-- Auto policy select (only shown when provider is auto) -->
 		{#if conversation.data.provider === "auto"}
 			<Tooltip>
 				{#snippet trigger(tooltip)}
-					<button
-						{...autoPolicySelect.trigger}
-						class={cn(
-							"focus-outline relative flex items-center gap-2 overflow-hidden rounded-lg border",
-							"bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
-							"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
-						)}
-						{...tooltip.trigger}
-					>
-						{autoPolicyLabels[autoPolicyValue]}
+					<button {...autoPolicySelect.trigger} class={cn(triggerClass, "flex-1")} {...tooltip.trigger}>
+						<span>{autoPolicyLabels[autoPolicyValue]}</span>
 						<IconCaret class="size-4 flex-none text-gray-500" />
 					</button>
 				{/snippet}
 				{autoPolicyDescriptions[autoPolicyValue]}
 			</Tooltip>
 
-			<div
-				{...autoPolicySelect.content}
-				class="z-50 rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800"
-			>
-				{#snippet policyOption(policy: "default" | "fastest" | "cheapest", label: string)}
-					<div {...autoPolicySelect.getOption(policy)} class="group block w-full p-1 text-sm dark:text-white">
-						<div
-							class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
-						>
-							<div class="flex flex-col items-start gap-0.5">
-								<span>{label}</span>
-								<span class="text-xs text-gray-500 dark:text-gray-400">
-									{autoPolicyDescriptions[policy]}
-								</span>
-							</div>
-						</div>
-					</div>
-				{/snippet}
-				{@render policyOption("default", "Default")}
-				{@render policyOption("fastest", "Fastest")}
-				{@render policyOption("cheapest", "Cheapest")}
+			<div {...autoPolicySelect.content} class={dropdownClass}>
+				{@render policyOption("default")}
+				{@render policyOption("fastest")}
+				{@render policyOption("cheapest")}
 			</div>
 		{/if}
 	</div>
 {:else}
 	<!-- Full mode for settings panel -->
 	<div class="flex flex-col gap-2">
-		<button
-			{...select.trigger}
-			class={cn(
-				"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
-				"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
-				classes,
-			)}
-		>
-			{@render providerDisplay(conversation.data.provider ?? "")}
-			<div
-				class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
-			>
-				<IconCaret />
+		<button {...select.trigger} class={cn(triggerClass, classes)}>
+			<div class="flex items-center gap-2">
+				<IconProvider provider={conversation.data.provider ?? ""} />
+				<span>{getProviderName(conversation.data.provider ?? "")}</span>
 			</div>
+			<IconCaret class="size-4 flex-none text-gray-500" />
 		</button>
 
-		<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-			{#snippet option(provider: string)}
-				<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
-					<div
-						class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
-					>
-						{@render providerDisplay(provider)}
-					</div>
-				</div>
-			{/snippet}
+		<div {...select.content} class={dropdownClass}>
 			{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
-				{@render option(provider)}
+				{@render providerOption(provider)}
 			{/each}
-			{@render option("auto")}
+			{@render providerOption("auto")}
 		</div>
 
 		{#if conversation.data.provider === "auto"}
@@ -250,39 +200,15 @@
 						{autoPolicyDescriptions[autoPolicyValue]}
 					</Tooltip>
 				</div>
-				<button
-					{...autoPolicySelect.trigger}
-					class={cn(
-						"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 text-sm leading-tight whitespace-nowrap shadow-sm",
-						"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
-					)}
-				>
-					{autoPolicyLabels[autoPolicyValue]}
-					<div
-						class="absolute right-2 grid size-4 flex-none place-items-center rounded-sm bg-gray-100 text-xs dark:bg-gray-600"
-					>
-						<IconCaret />
-					</div>
+				<button {...autoPolicySelect.trigger} class={triggerClass}>
+					<span>{autoPolicyLabels[autoPolicyValue]}</span>
+					<IconCaret class="size-4 flex-none text-gray-500" />
 				</button>
 
-				<div {...autoPolicySelect.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-					{#snippet policyOption(policy: "default" | "fastest" | "cheapest", label: string)}
-						<div {...autoPolicySelect.getOption(policy)} class="group block w-full p-1 text-sm dark:text-white">
-							<div
-								class="rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
-							>
-								<div class="flex flex-col items-start gap-0.5">
-									<span>{label}</span>
-									<span class="text-xs text-gray-500 dark:text-gray-400">
-										{autoPolicyDescriptions[policy]}
-									</span>
-								</div>
-							</div>
-						</div>
-					{/snippet}
-					{@render policyOption("default", "Default")}
-					{@render policyOption("fastest", "Fastest")}
-					{@render policyOption("cheapest", "Cheapest")}
+				<div {...autoPolicySelect.content} class={dropdownClass}>
+					{@render policyOption("default")}
+					{@render policyOption("fastest")}
+					{@render policyOption("cheapest")}
 				</div>
 			</div>
 		{/if}