fix: truncate long model names and IDs in UI (open-webui#20696)

- Added line-clamp-1 truncation and tooltips to long model names and IDs in the Evaluations and Models admin sections to prevent visual overflow. Model names now display truncated with full name and ID available on hover.

Author: silentoplayz

src/lib/components/admin/Evaluations/Feedbacks.svelte

@@ -302,9 +302,11 @@
 								<div class="flex flex-col items-start gap-0.5 h-full">
 									<div class="flex flex-col h-full">
 										{#if feedback.data?.sibling_model_ids}
-											<div class="font-medium text-gray-600 dark:text-gray-400 flex-1">
+											<Tooltip content={feedback.data?.model_id} placement="top-start">
+											<div class="font-medium text-gray-600 dark:text-gray-400 flex-1 line-clamp-1">
 												{feedback.data?.model_id}
 											</div>
+										</Tooltip>
 
 											<Tooltip content={feedback.data.sibling_model_ids.join(', ')}>
 												<div class=" text-[0.65rem] text-gray-600 dark:text-gray-400 line-clamp-1">
@@ -320,11 +322,11 @@
 												</div>
 											</Tooltip>
 										{:else}
-											<div
-												class=" text-sm font-medium text-gray-600 dark:text-gray-400 flex-1 py-1.5"
-											>
+											<Tooltip content={feedback.data?.model_id} placement="top-start">
+											<div class="text-sm font-medium text-gray-600 dark:text-gray-400 flex-1 py-1.5 line-clamp-1">
 												{feedback.data?.model_id}
 											</div>
+										</Tooltip>
 										{/if}
 									</div>
 								</div>

src/lib/components/admin/Evaluations/Leaderboard.svelte

@@ -182,7 +182,9 @@
 									alt={model.name}
 									class="size-5 rounded-full object-cover"
 								/>
-								<span class="font-medium text-gray-800 dark:text-gray-200">{model.name}</span>
+								<Tooltip content={`${model.name} (${model.id})`} placement="top-start">
+									<span class="font-medium text-gray-800 dark:text-gray-200 line-clamp-1">{model.name}</span>
+								</Tooltip>
 							</div>
 						</td>
 						<td class="px-3 py-1.5 text-right font-medium text-gray-900 dark:text-white">

src/lib/components/admin/Evaluations/LeaderboardModal.svelte

@@ -4,6 +4,7 @@
 	import { getModelHistory } from '$lib/apis/evaluations';
 	import ModelActivityChart from './ModelActivityChart.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
 	export let show = false;
 	export let model = null;
@@ -60,9 +61,11 @@
 <Modal size="md" bind:show>
 	{#if model}
 		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
-			<div class="text-lg font-medium self-center">
-				{model.name}
-			</div>
+			<Tooltip content={`${model.name} (${model.id})`} placement="top-start">
+				<div class="text-lg font-medium self-center line-clamp-1">
+					{model.name}
+				</div>
+			</Tooltip>
 			<button class="self-center" on:click={close} aria-label="Close">
 				<XMark className={'size-5'} />
 			</button>

src/lib/components/admin/Settings/Models/ModelList.svelte

@@ -50,7 +50,7 @@
 					<div class="flex items-center gap-1">
 						<EllipsisVertical className="size-4 cursor-move model-item-handle" />
 
-						<div class=" text-sm flex-1 py-1 rounded-lg">
+						<div class=" text-sm flex-1 py-1 rounded-lg line-clamp-1">
 							{#if $models.find((model) => model.id === modelId)}
 								{$models.find((model) => model.id === modelId).name}
 							{:else}