Mobile improvements and packages updates

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

@@ -11,7 +11,7 @@ function DebouncedBookmarkItem({
 	bookmarkItem,
 	setIsOpen,
 }: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) {
-	const { handleDelete } = useCommonHooks();
+	const { handleDelete, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -35,7 +35,11 @@ function DebouncedBookmarkItem({
 	}, [update]);
 
 	return (
-		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+		<Card
+			p={isMobile ? 'xl' : undefined}
+			className={cardClasses.settingsItem}
+			classNames={cardClasses}
+		>
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
@@ -68,6 +72,7 @@ function DebouncedBookmarkItem({
 				<ActionIcon
 					pos={'absolute'}
 					right={16}
+					top={16}
 					color='red'
 					onClick={() => {
 						setIsOpen(true);
@@ -77,7 +82,7 @@ function DebouncedBookmarkItem({
 					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
-			<Group w={'100%'} justify='center'>
+			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}
@@ -105,11 +110,11 @@ function DebouncedBookmarkItem({
 					}}
 				/>
 			</Group>
-			<Group w={'100%'} justify='center'>
+			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'URL'}
 					className={textInputClasses.settingsItem}
-					w={'100%'}
+					w={isMobile ? '80%' : '100%'}
 					pt={16}
 					classNames={textInputClasses}
 					defaultValue={bookmark.url}