From 6ae3ddd66bbb260b8f65cc6ab5adc4dfab9fe18a Mon Sep 17 00:00:00 2001
From: G30 <50341825+silentoplayz@users.noreply.github.com>
Date: Mon, 19 Jan 2026 04:59:44 -0500
Subject: [PATCH] fix: truncate long model names and IDs in UI (#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.
---
 src/lib/components/admin/Evaluations/Feedbacks.svelte  | 10 ++++++----
 .../components/admin/Evaluations/Leaderboard.svelte    |  4 +++-
 .../admin/Evaluations/LeaderboardModal.svelte          |  9 ++++++---
 .../components/admin/Settings/Models/ModelList.svelte  |  2 +-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/admin/Evaluations/Feedbacks.svelte b/src/lib/components/admin/Evaluations/Feedbacks.svelte
index 0ec5678f0e..ccf1735431 100644
--- a/src/lib/components/admin/Evaluations/Feedbacks.svelte
+++ b/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>
diff --git a/src/lib/components/admin/Evaluations/Leaderboard.svelte b/src/lib/components/admin/Evaluations/Leaderboard.svelte
index e16e62c98c..0dd501a153 100644
--- a/src/lib/components/admin/Evaluations/Leaderboard.svelte
+++ b/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">
diff --git a/src/lib/components/admin/Evaluations/LeaderboardModal.svelte b/src/lib/components/admin/Evaluations/LeaderboardModal.svelte
index fc3ec6eb10..6730e739d7 100644
--- a/src/lib/components/admin/Evaluations/LeaderboardModal.svelte
+++ b/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>
diff --git a/src/lib/components/admin/Settings/Models/ModelList.svelte b/src/lib/components/admin/Settings/Models/ModelList.svelte
index cc86e52e5f..d501a485d4 100644
--- a/src/lib/components/admin/Settings/Models/ModelList.svelte
+++ b/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}