better stylings

src/lib/components/billing-indicator.svelte

@@ -12,54 +12,26 @@
 	const { showModal }: Props = $props();
 </script>
 
-<button
-	onclick={showModal}
-	class={[
-		"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
-		"bg-gray-100/50 hover:bg-gray-100 active:bg-gray-200",
-		"dark:bg-gray-800/70 dark:hover:bg-gray-700 dark:active:bg-gray-700/50",
-	]}
->
+<button onclick={showModal} class="btn-sm">
 	<!-- Avatar or Icon -->
 	{#if billing.organization && billing.organizationInfo?.avatar && billing.isValid}
-		<img src={billing.organizationInfo.avatar} alt={billing.displayName} class="h-5 w-5 rounded-full" />
+		<img src={billing.organizationInfo.avatar} alt={billing.displayName} class="size-4 rounded-full" />
 	{:else if billing.organization}
-		<IconGroup class="h-4 w-4" />
+		<IconGroup class="size-4" />
 	{:else}
-		<IconUser class="h-4 w-4" />
+		<IconUser class="size-4" />
 	{/if}
 
-	<!-- Billing info -->
-	<div class="flex flex-col items-start">
-		<div class="flex items-center gap-1.5">
-			<span class="font-medium">
-				{billing.displayName}
-			</span>
+	<span class="max-w-32 truncate">{billing.displayName}</span>
 
-			<!-- Status indicator -->
-			{#if billing.organization}
-				{#if billing.validating}
-					<div class="h-3 w-3 animate-spin rounded-full border border-yellow-600 border-t-transparent"></div>
-				{:else if billing.isValid}
-					<IconCheckmark class="h-3 w-3 text-green-600 dark:text-green-400" />
-				{:else}
-					<IconWarning class="h-3 w-3 text-red-600 dark:text-red-400" />
-				{/if}
-			{/if}
-		</div>
-
-		<span class="text-xs text-gray-500 dark:text-gray-400">
-			{#if billing.organization}
-				{#if billing.validating}
-					Validating organization...
-				{:else if billing.isValid}
-					Organization billing
-				{:else}
-					Organization not found
-				{/if}
-			{:else}
-				Personal billing
-			{/if}
-		</span>
-	</div>
+	<!-- Status indicator for organization -->
+	{#if billing.organization}
+		{#if billing.validating}
+			<div class="size-3 animate-spin rounded-full border border-yellow-600 border-t-transparent"></div>
+		{:else if billing.isValid}
+			<IconCheckmark class="size-3 text-green-600 dark:text-green-400" />
+		{:else}
+			<IconWarning class="size-3 text-red-600 dark:text-red-400" />
+		{/if}
+	{/if}
 </button>

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

@@ -34,6 +34,12 @@
 		onValueChange(v) {
 			conversation.update({ provider: v });
 		},
+		sameWidth: false,
+		floatingConfig: {
+			computePosition: {
+				placement: "bottom-start",
+			},
+		},
 	});
 
 	const nameMap: Record<string, string> = {
@@ -95,6 +101,12 @@
 		onValueChange(v) {
 			conversation.update({ autoPolicy: v });
 		},
+		sameWidth: false,
+		floatingConfig: {
+			computePosition: {
+				placement: "bottom-start",
+			},
+		},
 	});
 
 	// Shared button styles