From c13de6395ff021dbf247c49b05fc5ac94fe5fb3d Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 16 Oct 2026 01:55:24 +0400
Subject: [PATCH] refac

---
 .../MessageInput/ModelControlSlider.svelte    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/ModelControlSlider.svelte b/src/lib/components/chat/MessageInput/ModelControlSlider.svelte
index 2804813a45..7781ea2770 100644
--- a/src/lib/components/chat/MessageInput/ModelControlSlider.svelte
+++ b/src/lib/components/chat/MessageInput/ModelControlSlider.svelte
@@ -2,7 +2,6 @@
 	import { createEventDispatcher, getContext } from 'svelte';
 	import type { ModelControl } from '$lib/apis';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
 
 	const i18n: any = getContext('i18n');
 	const dispatch = createEventDispatcher<{ change: string }>();
@@ -22,19 +21,19 @@
 
 <div class="space-y-2 px-2 py-2 text-xs">
 	<div class="flex items-center gap-2">
-		<span class="text-gray-700 dark:text-gray-100">{control.label}</span>
-		<span class="min-w-0 flex-1 truncate text-gray-500 dark:text-gray-400">{label}</span>
 		{#if control.description}
-			<Tooltip content={control.description}>
+			<Tooltip as="span" content={control.description} allowHTML={false}>
 				<button
 					type="button"
-					aria-label={control.description}
-					class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+					class="cursor-help text-gray-700 underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:text-gray-100 dark:decoration-gray-500"
 				>
-					<QuestionMarkCircle className="size-3.5" />
+					{control.label}
 				</button>
 			</Tooltip>
+		{:else}
+			<span class="text-gray-700 dark:text-gray-100">{control.label}</span>
 		{/if}
+		<span class="min-w-0 flex-1 truncate text-gray-500 dark:text-gray-400">{label}</span>
 	</div>
 	<div class="space-y-1">
 		<div
@@ -59,7 +58,7 @@
 				{disabled}
 				aria-label={control.label}
 				aria-valuetext={label}
-				class="control-slider h-5 w-full cursor-pointer appearance-none rounded-md bg-gray-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 disabled:cursor-wait [--slider-fill:var(--color-gray-300)] dark:bg-gray-800 dark:[--slider-fill:var(--color-gray-600)]"
+				class="control-slider h-5 w-full border-y border-transparent bg-clip-padding cursor-pointer appearance-none rounded-md bg-gray-100 outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 disabled:cursor-wait [--slider-fill:var(--color-gray-500)] dark:bg-gray-800 dark:[--slider-fill:var(--color-gray-600)]"
 				style:background-image={`linear-gradient(to right, var(--slider-fill) ${progress}%, transparent ${progress}%)`}
 				on:input={() => (editing = true)}
 				on:change={() => {
@@ -87,17 +86,17 @@
 <style>
 	.control-slider::-webkit-slider-thumb {
 		appearance: none;
-		width: 1rem;
-		height: 1.25rem;
-		border-radius: 0.375rem;
+		width: 0.9375rem;
+		height: 1.1875rem;
+		border-radius: 0.25rem;
 		background: white;
 		box-shadow: 0 1px 3px #0003;
 	}
 	.control-slider::-moz-range-thumb {
-		width: 1rem;
-		height: 1.25rem;
+		width: 0.9375rem;
+		height: 1.1875rem;
 		border: 0;
-		border-radius: 0.375rem;
+		border-radius: 0.25rem;
 		background: white;
 		box-shadow: 0 1px 3px #0003;
 	}