Mobile improvements and packages updates

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -14,7 +14,7 @@ function DebouncedSearchProvider({
 	searchProvider: Provider;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { handleDelete } = useCommonHooks();
+	const { handleDelete, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -40,7 +40,11 @@ function DebouncedSearchProvider({
 	}, [update]);
 
 	return (
-		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+		<Card
+			p={isMobile ? 'xl' : undefined}
+			className={cardClasses.settingsItem}
+			classNames={cardClasses}
+		>
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
@@ -82,7 +86,7 @@ function DebouncedSearchProvider({
 					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
-			<Stack>
+			<Stack w={'100%'} align='center'>
 				<Group w={'100%'} justify='center'>
 					<TextInput
 						label={'Name'}
@@ -113,6 +117,7 @@ function DebouncedSearchProvider({
 				</Group>
 				<TextInput
 					label={'Url'}
+					w={isMobile ? '80%' : '100%'}
 					className={textInputClasses.settingsItem}
 					pt={16}
 					classNames={textInputClasses}

src/pages/settings/components/Search/SearchProviders.tsx

@@ -71,7 +71,7 @@ const SearchProviderSettings = () => {
 				title={'Add a new Search Provider'}
 				body={
 					<Stack gap={0} w={'100%'} align='center'>
-						<Stack>
+						<Stack w={'100%'} align='center'>
 							<Group w={'100%'} justify='center'>
 								<TextInput
 									label={'Name'}
@@ -104,6 +104,7 @@ const SearchProviderSettings = () => {
 								label={'Url'}
 								className={textInputClasses.settingsItem}
 								pt={16}
+								w={isMobile ? '64%' : '100%'}
 								classNames={textInputClasses}
 								defaultValue={newProvider.url}
 								onChange={(event) => {
@@ -171,8 +172,11 @@ const SearchProviderSettings = () => {
 								<Popover
 									withArrow
 									withOverlay
+									trapFocus
 									closeOnClickOutside={!isOpen}
 									classNames={popoverClasses}
+									middlewares={{ shift: { padding: 20 } }}
+									position='bottom'
 								>
 									<Popover.Target>
 										<Box
@@ -183,7 +187,7 @@ const SearchProviderSettings = () => {
 											<SearchProviderSettingsItem provider={provider} />
 										</Box>
 									</Popover.Target>
-									<Popover.Dropdown w={isMobile ? '100%' : undefined}>
+									<Popover.Dropdown w={isMobile ? '90%' : undefined}>
 										<DebouncedSearchProvider
 											searchProvider={provider}
 											setIsOpen={setIsOpen}