fix: поле 200px, бейджи в отдельном flex-контейнере рядом

This commit is contained in:
2026-07-24 16:25:45 +03:00
parent e5f8dbce42
commit fd8d27e3d2

View File

@@ -142,10 +142,10 @@ export default function TableFieldMultiSelect({
} }
return ( return (
<div className="flex flex-wrap items-center gap-1 w-full"> <div className="flex items-center gap-1 w-full">
<Popover open={isOpen} onOpenChange={setIsOpen} modal={false}> <Popover open={isOpen} onOpenChange={setIsOpen} modal={false}>
<PopoverAnchor asChild> <PopoverAnchor asChild>
<div className="relative w-auto min-w-[120px] max-w-[240px] flex-shrink-0"> <div className="relative w-[200px] flex-shrink-0">
<Input <Input
ref={inputRef} ref={inputRef}
className="h-8" className="h-8"
@@ -219,23 +219,25 @@ export default function TableFieldMultiSelect({
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
{selectedLabels.map((label, idx) => { <div className="flex flex-wrap items-center gap-1 flex-1 min-w-0">
const rowId = selectedValues[idx]; {selectedLabels.map((label, idx) => {
return ( const rowId = selectedValues[idx];
<div key={rowId} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs shrink-0"> return (
<span className="truncate max-w-[150px]">{label}</span> <div key={rowId} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs shrink-0">
<Button <span className="truncate max-w-[150px]">{label}</span>
type="button" <Button
variant="ghost" type="button"
size="icon" variant="ghost"
className="h-4 w-4" size="icon"
onClick={() => toggle(rowId)} className="h-4 w-4"
> onClick={() => toggle(rowId)}
<X className="w-3 h-3" /> >
</Button> <X className="w-3 h-3" />
</div> </Button>
); </div>
})} );
})}
</div>
</div> </div>
); );
} }