Mobile improvements and packages updates

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -14,7 +14,7 @@ function DebouncedWolClient({
 	wolClient: WolClient;
 	setIsOpen: (isOpen: boolean) => void;
 }) {
-	const { handleDelete } = useCommonHooks();
+	const { handleDelete, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -39,7 +39,11 @@ function DebouncedWolClient({
 	}, [update]);
 
 	return (
-		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+		<Card
+			p={isMobile ? 'xl' : undefined}
+			className={cardClasses.settingsItem}
+			classNames={cardClasses}
+		>
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}

src/pages/settings/components/WoL/WolClients.tsx

@@ -152,8 +152,12 @@ const WolClientSettings = () => {
 								<Popover
 									withArrow
 									withOverlay
+									trapFocus
 									closeOnClickOutside={!isOpen}
 									classNames={popoverClasses}
+									middlewares={{ shift: { padding: 20 } }}
+									position='bottom'
+									offset={isMobile ? -100 : 0}
 								>
 									<Popover.Target>
 										<Group
@@ -165,7 +169,7 @@ const WolClientSettings = () => {
 											<WolClientSettingsItem client={client} />
 										</Group>
 									</Popover.Target>
-									<Popover.Dropdown w={isMobile ? '100%' : undefined}>
+									<Popover.Dropdown w={isMobile ? '90%' : undefined}>
 										<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
 									</Popover.Dropdown>
 								</Popover>