fix(data-table): make faceted filter popover width adaptive (#4905) (#4966)

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:
Calcium-Ion 2026-05-19 16:39:57 +08:00 committed by GitHub
parent 0cd9a3a068
commit 5e88f97ac1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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' ? (