Fixed styles

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -14,7 +14,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiTrash } from 'react-icons/fi';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
@@ -170,17 +170,26 @@ function DebouncedApplication({
 					}}
 				/>
 			</Group>
-			<Group w={'100%'} justify='center'>
+			<Group w={'100%'} justify='space-between'>
 				<Select
+					w={'48%'}
 					label={'Icon'}
-					className={textInputClasses.settingsItem}
-					classNames={textInputClasses}
+					className={selectClasses.settingsItem}
+					classNames={{
+						input: selectClasses.menuSelectInput,
+						label: selectClasses.menuSelectLabel,
+						options: selectClasses.menuSelectOptions,
+						option: selectClasses.menuSelectOption,
+						dropdown: selectClasses.dropdown,
+					}}
+					mt={12}
 					data={Object.keys(allIcons).map((icon) => {
 						return { value: icon, label: icon };
 					})}
 					defaultValue={app.icon}
 					comboboxProps={{
 						zIndex: 3000,
+						withinPortal: false,
 					}}
 					onChange={(event: any) => {
 						setUpdate({
@@ -198,6 +207,7 @@ function DebouncedApplication({
 						);
 					}}
 					searchable
+					maxDropdownHeight={175}
 					onDropdownOpen={() => setIsOpen(true)}
 					onDropdownClose={() => setIsOpen(false)}
 				/>