fix style: api endpoint selector

This commit is contained in:
Jing Hua 2023-04-28 17:28:27 +08:00
parent 6c214f107d
commit b419255beb

View file

@ -53,7 +53,7 @@ const ApiMenu = ({
{t('customEndpoint', { ns: 'api' })} {t('customEndpoint', { ns: 'api' })}
</label> </label>
<div className='flex gap-2 items-center justify-center mb-6'> <div className='flex gap-2 items-center mb-6'>
<div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm'> <div className='min-w-fit text-gray-900 dark:text-gray-300 text-sm'>
{t('apiEndpoint.inputLabel', { ns: 'api' })} {t('apiEndpoint.inputLabel', { ns: 'api' })}
</div> </div>
@ -124,13 +124,13 @@ const ApiEndpointSelector = ({
const [dropDown, setDropDown] = useState<boolean>(false); const [dropDown, setDropDown] = useState<boolean>(false);
return ( return (
<div className='w-full relative'> <div className='w-[40vw] relative flex-1'>
<button <button
className='btn btn-neutral btn-small flex w-32 flex justify-between w-full' className='btn btn-neutral btn-small flex justify-between w-full'
type='button' type='button'
onClick={() => setDropDown((prev) => !prev)} onClick={() => setDropDown((prev) => !prev)}
> >
{_apiEndpoint} <span className='truncate'>{_apiEndpoint}</span>
<DownChevronArrow /> <DownChevronArrow />
</button> </button>
<div <div
@ -145,7 +145,7 @@ const ApiEndpointSelector = ({
> >
{availableEndpoints.map((endpoint) => ( {availableEndpoints.map((endpoint) => (
<li <li
className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer' className='px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer truncate'
onClick={() => { onClick={() => {
_setApiEndpoint(endpoint); _setApiEndpoint(endpoint);
setDropDown(false); setDropDown(false);