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.
This commit is contained in:
G30 authored and GitHub committed 2026-01-19 13:59:44 +04:00
1 parent 98cb2d3411
commit 6ae3ddd66b
4 files changed
+16 -9

No files matched your search

@@ -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>