From 823df7d0fb3fa2e43979bbf2974f13b4c2bdd56d Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Tue, 27 Oct 2026 06:50:15 +0100
Subject: [PATCH] ui: Highlight reasoning toggle on hover and align it with
 model selector (#31212)

On desktop, the reasoning effort toggle now gets a muted background on
hover and while its menu is open, matches the model selector's 24px
height, uses a 13px icon and sits 5px from the selector.

Assisted-by: Claude (Opus 5.5 Medium)
---
 .../ChatFormActions/ChatFormActionReasoning.svelte        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionReasoning.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionReasoning.svelte
index 29de5ec26..e468c594c 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionReasoning.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionReasoning.svelte
@@ -30,9 +30,9 @@
 {#snippet triggerLabel()}
 	<span class="flex items-center gap-0.75 {reasoning.isOff ? 'text-muted-foreground' : ''}">
 		{#if reasoning.isOff}
-			<LightbulbOff class="size-3 max-md:size-4 shrink-0" />
+			<LightbulbOff class="size-3.25 max-md:size-4 shrink-0" />
 		{:else}
-			<Lightbulb class="size-3 max-md:size-4 shrink-0" />
+			<Lightbulb class="size-3.25 max-md:size-4 shrink-0" />
 		{/if}
 
 		{#if !isDefault}
@@ -102,9 +102,9 @@
 				<Button
 					{...props}
 					aria-label="Reasoning effort"
-					class="h-auto gap-1 rounded-sm bg-transparent! backdrop-blur-none! {isDefault
+					class="-mr-px h-6 min-w-6 gap-1 rounded-sm bg-transparent backdrop-blur-none! {isDefault
 						? 'px-1'
-						: 'px-1.75!'} py-1 text-xs hover:bg-transparent!"
+						: 'px-1.75!'} py-0 text-xs hover:bg-muted-foreground/15 data-[state=open]:bg-muted-foreground/15"
 					variant="ghost"
 				>
 					{@render triggerLabel()}