feat: Add TruncatedText component

tools/server/webui/src/lib/components/app/index.ts

@@ -70,6 +70,7 @@ export { default as RemoveButton } from './misc/RemoveButton.svelte';
 export { default as SearchInput } from './misc/SearchInput.svelte';
 export { default as SearchableDropdownMenu } from './misc/SearchableDropdownMenu.svelte';
 export { default as SyntaxHighlightedCode } from './misc/SyntaxHighlightedCode.svelte';
+export { default as TruncatedText } from './misc/TruncatedText.svelte';
 
 // Models
 

tools/server/webui/src/lib/components/app/misc/TruncatedText.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	/**
+	 * TruncatedText - Shows tooltip only when text is actually truncated
+	 */
+	import * as Tooltip from '$lib/components/ui/tooltip';
+
+	interface Props {
+		text: string;
+		class?: string;
+	}
+
+	let { text, class: className = '' }: Props = $props();
+
+	let textElement: HTMLSpanElement | undefined = $state();
+	let isTruncated = $state(false);
+
+	function checkTruncation() {
+		if (textElement) {
+			isTruncated = textElement.scrollWidth > textElement.clientWidth;
+		}
+	}
+
+	$effect(() => {
+		if (textElement) {
+			checkTruncation();
+			// Re-check on resize
+			const observer = new ResizeObserver(checkTruncation);
+			observer.observe(textElement);
+			return () => observer.disconnect();
+		}
+	});
+</script>
+
+{#if isTruncated}
+	<Tooltip.Root>
+		<Tooltip.Trigger class={className}>
+			<span bind:this={textElement} class="block truncate">
+				{text}
+			</span>
+		</Tooltip.Trigger>
+		<Tooltip.Content class="z-[9999]">
+			<p>{text}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	<span bind:this={textElement} class="{className} block truncate">
+		{text}
+	</span>
+{/if}

tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte

@@ -16,7 +16,11 @@
 	import { usedModalities, conversationsStore } from '$lib/stores/conversations.svelte';
 	import { ServerModelStatus } from '$lib/enums';
 	import { isRouterMode } from '$lib/stores/server.svelte';
-	import { DialogModelInformation, SearchableDropdownMenu } from '$lib/components/app';
+	import {
+		DialogModelInformation,
+		SearchableDropdownMenu,
+		TruncatedText
+	} from '$lib/components/app';
 	import type { ModelOption } from '$lib/types/models';
 
 	interface Props {
@@ -371,9 +375,10 @@
 					>
 						<Package class="h-3.5 w-3.5" />
 
-						<span class="truncate font-medium">
-							{selectedOption?.model || 'Select model'}
-						</span>
+						<TruncatedText
+							text={selectedOption?.model || 'Select model'}
+							class="min-w-0 font-medium"
+						/>
 
 						{#if updating}
 							<Loader2 class="h-3 w-3.5 animate-spin" />
@@ -437,7 +442,7 @@
 								}
 							}}
 						>
-							<span class="min-w-0 flex-1 truncate">{option.model}</span>
+							<TruncatedText text={option.model} class="min-w-0 flex-1 text-left" />
 
 							{#if missingModalities}
 								<span class="flex shrink-0 items-center gap-1 text-muted-foreground/70">
@@ -522,9 +527,7 @@
 			>
 				<Package class="h-3.5 w-3.5" />
 
-				<span class="truncate font-medium">
-					{selectedOption?.model}
-				</span>
+				<TruncatedText text={selectedOption?.model || ''} class="min-w-0 font-medium" />
 
 				{#if updating}
 					<Loader2 class="h-3 w-3.5 animate-spin" />