Mobile improvements and packages updates

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}