Mobile improvements and packages updates

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -193,7 +193,7 @@ function DebouncedGroupSettingsItem({
 							borderRadius: '100%',
 							backgroundColor: 'var(--mantine-color-accent-0)',
 							position: 'absolute',
-							top: isMobile ? 164 : 78,
+							top: isMobile ? 140 : 78,
 							right: 18,
 							zIndex: 10,
 							fontSize: 20,
@@ -226,8 +226,11 @@ function DebouncedGroupSettingsItem({
 													<Popover
 														withArrow
 														withOverlay
+														trapFocus
 														closeOnClickOutside={!isOpen}
 														classNames={popoverClasses}
+														middlewares={{ shift: { padding: 20 } }}
+														position='bottom'
 													>
 														<Popover.Target>
 															<Box pos={'relative'}>
@@ -252,7 +255,7 @@ function DebouncedGroupSettingsItem({
 																<BookmarkSettingsItem bookmark={bookmark} />
 															</Box>
 														</Popover.Target>
-														<Popover.Dropdown w={isMobile ? '100%' : undefined}>
+														<Popover.Dropdown w={isMobile ? '90%' : undefined}>
 															<DebouncedBookmarkItem
 																bookmarkItem={bookmark}
 																setIsOpen={setIsOpen}
@@ -279,7 +282,8 @@ function DebouncedGroupSettingsItem({
 					<Popover
 						withArrow
 						withOverlay
-						position='top'
+						trapFocus
+						position='bottom'
 						opened={popoverOpened}
 						onChange={setPopoverOpened}
 						closeOnEscape
@@ -301,7 +305,7 @@ function DebouncedGroupSettingsItem({
 								<FiPlus /> Bookmark
 							</Button>
 						</Popover.Target>
-						<Popover.Dropdown w={isMobile ? '100%' : undefined}>
+						<Popover.Dropdown w={isMobile ? '90%' : undefined}>
 							<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 								<Stack w={'100%'} display={'flex'} pos={'relative'}>
 									<Group w={'100%'} justify='center'>