From 10ac60033700058400fe967e9f21ca103156be9a Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Mon, 17 Aug 2026 10:59:55 +0200
Subject: [PATCH] ui : fix formatting in chat form and model selector

---
 .../ChatFormActionAddReasoningSubmenu.svelte  | 116 +++++++++---------
 .../app/models/ModelsSelectorOption.svelte    |   2 +-
 2 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
index 16f07ae804..b2b1024458 100644
--- a/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
+++ b/tools/ui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionAdd/ChatFormActionAddReasoningSubmenu.svelte
@@ -9,66 +9,66 @@
 </script>
 
 <DropdownMenu.Sub>
-		<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
-			{#if reasoning.isReasoningActive}
-				<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
-			{:else if reasoning.isOff}
-				<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
-			{:else}
-				<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
-			{/if}
+	<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
+		{#if reasoning.isReasoningActive}
+			<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-amber-400" />
+		{:else if reasoning.isOff}
+			<LightbulbOff class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+		{:else}
+			<Lightbulb class="{ICON_CLASS_DEFAULT} shrink-0 text-muted-foreground" />
+		{/if}
 
-			<span
-				class="text-sm inline-flex gap-2 {!reasoning.isReasoningActive
-					? 'text-muted-foreground'
-					: ''}"
-			>
-				Reasoning
-
-				<span class="capitalize text-muted-foreground">
-					{reasoning.currentEffort}
-				</span>
-			</span>
-		</DropdownMenu.SubTrigger>
-
-		<DropdownMenu.SubContent
-			class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
+		<span
+			class="text-sm inline-flex gap-2 {!reasoning.isReasoningActive
+				? 'text-muted-foreground'
+				: ''}"
 		>
-			{#each reasoning.levels as level (level.value)}
-				{@const tokenLabel = reasoning.tokenLabel(level)}
-				<DropdownMenu.Item
-					class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent {reasoning.isSelected(
-						level
-					)
-						? 'bg-accent'
-						: ''}"
-					onclick={() => reasoning.select(level)}
-				>
-					{#if reasoning.isSelected(level)}
-						<Check class="{ICON_CLASS_DEFAULT} shrink-0 text-foreground" />
-					{:else}
-						<div class="{ICON_CLASS_DEFAULT} shrink-0"></div>
-					{/if}
+			Reasoning
 
-					<span class="flex-1">{level.label}</span>
+			<span class="capitalize text-muted-foreground">
+				{reasoning.currentEffort}
+			</span>
+		</span>
+	</DropdownMenu.SubTrigger>
 
-					{#if tokenLabel}
-						<span class="text-[11px] text-muted-foreground opacity-60">
-							{tokenLabel}
-						</span>
-					{/if}
+	<DropdownMenu.SubContent
+		class="w-60 bg-popover p-1.5 text-popover-foreground shadow-md outline-none"
+	>
+		{#each reasoning.levels as level (level.value)}
+			{@const tokenLabel = reasoning.tokenLabel(level)}
+			<DropdownMenu.Item
+				class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.75 text-left text-sm transition-colors hover:bg-accent {reasoning.isSelected(
+					level
+				)
+					? 'bg-accent'
+					: ''}"
+				onclick={() => reasoning.select(level)}
+			>
+				{#if reasoning.isSelected(level)}
+					<Check class="{ICON_CLASS_DEFAULT} shrink-0 text-foreground" />
+				{:else}
+					<div class="{ICON_CLASS_DEFAULT} shrink-0"></div>
+				{/if}
 
-					{#if level.hasInfo}
-						<Tooltip.Root>
-							<Tooltip.Trigger>
-								<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content side="left">
-								<p>Maximum reasoning effort with extended context usage</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					{/if}
-				</DropdownMenu.Item>
-			{/each}
-		</DropdownMenu.SubContent>
-	</DropdownMenu.Sub>
+				<span class="flex-1">{level.label}</span>
+
+				{#if tokenLabel}
+					<span class="text-[11px] text-muted-foreground opacity-60">
+						{tokenLabel}
+					</span>
+				{/if}
+
+				{#if level.hasInfo}
+					<Tooltip.Root>
+						<Tooltip.Trigger>
+							<Info class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+						</Tooltip.Trigger>
+						<Tooltip.Content side="left">
+							<p>Maximum reasoning effort with extended context usage</p>
+						</Tooltip.Content>
+					</Tooltip.Root>
+				{/if}
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.SubContent>
+</DropdownMenu.Sub>
diff --git a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
index 20f10df356..5ea0eb1972 100644
--- a/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
+++ b/tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
@@ -86,7 +86,7 @@
 		{hideOrgName}
 		aliases={option.aliases}
 		tags={option.tags}
-		modalities={modalities}
+		{modalities}
 		{supportsThinking}
 		showRawTooltip
 		class="flex-1"