From 74eb83e15162b8e41bc14e190c3b2058a1e5916e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 27 Aug 2024 12:08:20 +0200
Subject: [PATCH] Fix multiselect component overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../ui/inline-multiselect/inline-multiselect.tsx          | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/inline-multiselect/inline-multiselect.tsx b/src/components/ui/inline-multiselect/inline-multiselect.tsx
index 83e7f2bc5..78f487202 100644
--- a/src/components/ui/inline-multiselect/inline-multiselect.tsx
+++ b/src/components/ui/inline-multiselect/inline-multiselect.tsx
@@ -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,