bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix multiselect component overflow

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-08-27 12:08:20 +02:00
parent d09d5808ab
commit 74eb83e151
1 changed files with 3 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/ui/inline-multiselect/inline-multiselect.tsx
View file

@ -8,17 +8,15 @@ interface IInlineMultiselect<T extends string> {
disabled?: boolean;
}
/**
*
*/
/** Allows to select many of available options. */
const InlineMultiselect = <T extends string>({ items, value, onChange, disabled }: IInlineMultiselect<T>) => (
<div className='flex w-fit overflow-hidden rounded-md border border-gray-400 bg-white black:bg-black dark:border-gray-800 dark:bg-gray-900'>
<div className='flex w-fit overflow-auto rounded-md border border-gray-400 bg-white black:bg-black dark:border-gray-800 dark:bg-gray-900'>
{Object.entries(items).map(([key, label], i) => {
const checked = value?.includes(key as T);
return (
<label
className={clsx('px-3 py-2 text-white transition-colors hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700', {
className={clsx('whitespace-nowrap px-3 py-2 text-white transition-colors hover:bg-primary-700 [&:has(:focus-visible)]:bg-primary-700', {
'cursor-pointer': !disabled,
'opacity-75': disabled,
'bg-gray-500': !checked,