fix(dashboard): Prevent facet value chip remove button from being hidden on long… (#4712)

Author: Ryrahul

packages/dashboard/src/lib/components/shared/assigned-facet-values.tsx

@@ -45,7 +45,7 @@ export function AssignedFacetValues({
                     const facetValue = knownFacetValues.find(fv => fv.id === id);
                     if (!facetValue) return null;
                     return (
-                        <div className="mb-2 mr-1" key={facetValue.id}>
+                        <div className="mb-2 mr-1 max-w-full" key={facetValue.id}>
                             <FacetValueChip
                                 facetValue={facetValue}
                                 removable={canUpdate}

packages/dashboard/src/lib/components/shared/facet-value-chip.tsx

@@ -36,18 +36,18 @@ export function FacetValueChip({
     return (
         <Badge
             variant="secondary"
-            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
+            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 max-w-full shrink hover:bg-secondary/80"
         >
-            <div className="flex items-center gap-1.5">
-                <span className="font-medium">{facetValue.name}</span>
+            <div className="flex items-center gap-1.5 min-w-0 truncate">
+                <span className="font-medium truncate" title={facetValue.name}>{facetValue.name}</span>
                 {displayFacetName && (
-                    <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>
+                    <span className="text-muted-foreground text-xs truncate" title={facetValue.facet.name}>in {facetValue.facet.name}</span>
                 )}
             </div>
             {removable && (
                 <button
                     type="button"
-                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30"
+                    className="ml-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full hover:bg-muted/30"
                     onClick={() => onRemove?.(facetValue.id)}
                     aria-label={`Remove ${facetValue.name} from ${facetValue.facet.name}`}
                 >