dark

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -59,20 +59,22 @@
 		: 'mx-4'} flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-sm *:flex-none dark:border-gray-800 dark:bg-gray-800/70 dark:hover:bg-gray-800"
 >
 	<Avatar orgName={nameSpace} size="md" />
-	<button on:click={() => (modelSelectorOpen = true)}>{conversation.model.id}</button>
+	<button class="!flex-1 self-stretch text-left hover:underline" on:click={() => (modelSelectorOpen = true)}
+		>{conversation.model.id}</button
+	>
 	<button
-		class="ml-auto flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+		class="flex size-6 items-center justify-center rounded bg-gray-50 text-xs hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
 		on:click={() => dispatch("close", conversation.model.id)}
 	>
 		✕
 	</button>
 	<button
-		class="group relative flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700"
+		class="group relative flex size-6 items-center justify-center rounded bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
 	>
 		<IconCog />
 		<GenerationConfig
 			bind:conversation
-			classNames="absolute top-7 min-w-[250px] z-10 right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-600 hidden group-focus:flex hover:flex"
+			classNames="absolute top-7 min-w-[250px] z-10 right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-800 hidden group-focus:flex hover:flex"
 		/>
 	</button>
 </div>