From 5e88f97ac1ed87961089cc4aa71ecebb3938f3a2 Mon Sep 17 00:00:00 2001
From: Calcium-Ion <i@caion.me>
Date: Tue, 19 May 2026 16:39:57 +0800
Subject: [PATCH] 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
---
 .../src/components/data-table/faceted-filter.tsx       | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/default/src/components/data-table/faceted-filter.tsx b/web/default/src/components/data-table/faceted-filter.tsx
index 9cca6b50..bd81a153 100644
--- a/web/default/src/components/data-table/faceted-filter.tsx
+++ b/web/default/src/components/data-table/faceted-filter.tsx
@@ -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' ? (