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:
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>
|
||||
|
||||
Reference in new issue
Block a user