keep box the same size when filtering icons

This commit is contained in:
Josh Hawkins 2024-05-09 08:16:46 -05:00
parent 2324eb93d8
commit 207c338587

View File

@ -114,26 +114,28 @@ export default function IconPicker({
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
/> />
<div className="grid grid-cols-6 my-2 gap-2 max-h-[20dvh] overflow-y-auto pr-1"> <div className="flex flex-col flex-1 h-[20dvh]">
{icons.map(([name, Icon]) => ( <div className="grid grid-cols-6 my-2 gap-2 max-h-[20dvh] overflow-y-auto pr-1">
<div {icons.map(([name, Icon]) => (
key={name} <div
className={cn( key={name}
"flex flex-row justify-center items-start hover:cursor-pointer p-1 rounded-lg", className={cn(
selectedIcon?.name === name "flex flex-row justify-center items-start hover:cursor-pointer p-1 rounded-lg",
? "bg-selected text-white" selectedIcon?.name === name
: "hover:bg-secondary-foreground", ? "bg-selected text-white"
)} : "hover:bg-secondary-foreground",
> )}
<Icon >
size={20} <Icon
onClick={() => { size={20}
handleIconSelect({ name, Icon }); onClick={() => {
setOpen(false); handleIconSelect({ name, Icon });
}} setOpen(false);
/> }}
</div> />
))} </div>
))}
</div>
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>