The faceted filter popover used a fixed width of 200px, which clipped
long option labels (e.g. user-defined channel group names) and forced
the truncated text to be unreadable without leaving a way to see the
full value.
- Switch PopoverContent from `w-[200px]` to
`min-w-[200px] max-w-[360px]` so short option lists keep their
current footprint while long labels can expand up to 360px before
the existing truncate kicks in.
- Add `title={t(option.label)}` on the truncated label span so users
can still hover to see the full text on extreme cases.
Closes #4905
This commit is contained in:
parent
0cd9a3a068
commit
5e88f97ac1
@ -107,7 +107,10 @@ export function DataTableFacetedFilter<TData, TValue>({
|
||||
</>
|
||||
)}
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className='w-[200px] p-0' align='start'>
|
||||
<PopoverContent
|
||||
className='min-w-[200px] max-w-[360px] p-0'
|
||||
align='start'
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder={title} />
|
||||
<CommandList>
|
||||
@ -159,7 +162,10 @@ export function DataTableFacetedFilter<TData, TValue>({
|
||||
) : option.icon ? (
|
||||
<option.icon className='text-muted-foreground size-4' />
|
||||
) : null}
|
||||
<span className='min-w-0 flex-1 truncate'>
|
||||
<span
|
||||
className='min-w-0 flex-1 truncate'
|
||||
title={t(option.label)}
|
||||
>
|
||||
{t(option.label)}
|
||||
</span>
|
||||
{typeof option.count === 'number' ? (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user