fix: поле 200px, бейджи в отдельном flex-контейнере рядом
This commit is contained in:
@@ -142,10 +142,10 @@ export default function TableFieldMultiSelect({
|
||||
}
|
||||
|
||||
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}>
|
||||
<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
|
||||
ref={inputRef}
|
||||
className="h-8"
|
||||
@@ -219,23 +219,25 @@ export default function TableFieldMultiSelect({
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{selectedLabels.map((label, idx) => {
|
||||
const rowId = selectedValues[idx];
|
||||
return (
|
||||
<div key={rowId} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs shrink-0">
|
||||
<span className="truncate max-w-[150px]">{label}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-4 w-4"
|
||||
onClick={() => toggle(rowId)}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="flex flex-wrap items-center gap-1 flex-1 min-w-0">
|
||||
{selectedLabels.map((label, idx) => {
|
||||
const rowId = selectedValues[idx];
|
||||
return (
|
||||
<div key={rowId} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted text-xs shrink-0">
|
||||
<span className="truncate max-w-[150px]">{label}</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-4 w-4"
|
||||
onClick={() => toggle(rowId)}
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user