fix(data-table): prevent component cell clipping

- apply table-level truncation only to primitive text cells.
- let tables expand to content width with horizontal scrolling to avoid column overlap.
- update model badges to show full model names on one line.
This commit is contained in:
QuentinHsu
2026-06-16 17:23:25 +08:00
parent eb86311604
commit 34287afec7
3 changed files with 33 additions and 25 deletions
@@ -101,12 +101,12 @@ function ModelBadgeContent(props: ModelBadgeProps) {
showDot={!provider}
autoColor={provider ? undefined : props.modelName}
className={cn(
'border-border/60 bg-muted/30 h-6 max-w-full gap-1.5 rounded-md border px-2 [font-family:var(--font-body)]',
'border-border/60 bg-muted/30 h-6 max-w-none gap-1.5 rounded-md border px-2 [font-family:var(--font-body)]',
provider && 'text-foreground',
props.className
)}
>
<span className='flex max-w-full min-w-0 items-center gap-1.5'>
<span className='flex max-w-none items-center gap-1.5'>
{provider && (
<span
className='flex size-3.5 shrink-0 items-center justify-center'
@@ -116,7 +116,7 @@ function ModelBadgeContent(props: ModelBadgeProps) {
{getLobeIcon(provider.icon, 14)}
</span>
)}
<span className='truncate'>{props.modelName}</span>
<span className='whitespace-nowrap'>{props.modelName}</span>
</span>
</StatusBadge>
)