fix: Modify the style of the AsyncDropdown component (#4642)

* bugfix/Modify the style of the AsyncDropdown component to adjust its width based on the multiple property. #4641

* style: fix linter warning

* style: fix linter warning

* style: fix linter warning

---------

Co-authored-by: 강나훈 <nahoon.kang@mnc.ai>

Author: ejrtks1020

packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx

@@ -5,7 +5,7 @@ import axios from 'axios'
 
 // Material
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'
-import { Popper, CircularProgress, TextField, Box, Typography } from '@mui/material'
+import { Popper, CircularProgress, TextField, Box, Typography, Tooltip } from '@mui/material'
 import { useTheme, styled } from '@mui/material/styles'
 
 // API
@@ -175,7 +175,7 @@ export const AsyncDropdown = ({
                 multiple={multiple}
                 filterSelectedOptions={multiple}
                 size='small'
-                sx={{ mt: 1, width: '100%' }}
+                sx={{ mt: 1, width: multiple ? '90%' : '100%' }}
                 open={open}
                 onOpen={() => {
                     setOpen(true)
@@ -210,7 +210,8 @@ export const AsyncDropdown = ({
                     const matchingOptions = multiple
                         ? findMatchingOptions(options, internalValue)
                         : [findMatchingOptions(options, internalValue)].filter(Boolean)
-                    return (
+
+                    const textField = (
                         <TextField
                             {...params}
                             value={internalValue}
@@ -255,6 +256,20 @@ export const AsyncDropdown = ({
                             }}
                         />
                     )
+
+                    return !multiple ? (
+                        textField
+                    ) : (
+                        <Tooltip
+                            title={
+                                typeof internalValue === 'string' ? internalValue.replace(/[[\]"]/g, '').replace(/,/g, ', ') : internalValue
+                            }
+                            placement='top'
+                            arrow
+                        >
+                            {textField}
+                        </Tooltip>
+                    )
                 }}
                 renderOption={(props, option) => (
                     <Box component='li' {...props} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>