Mobile improvements and packages updates

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -24,7 +24,7 @@ function DebouncedApplication({
 	setIsOpen,
 	allIcons,
 }: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) {
-	const { handleDelete } = useCommonHooks();
+	const { handleDelete, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -47,7 +47,11 @@ function DebouncedApplication({
 		}
 	}, [update]);
 	return (
-		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+		<Card
+			p={isMobile ? 'xl' : undefined}
+			className={cardClasses.settingsItem}
+			classNames={cardClasses}
+		>
 			<DeleteItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
@@ -79,6 +83,7 @@ function DebouncedApplication({
 			>
 				<ActionIcon
 					pos={'absolute'}
+					top={16}
 					right={16}
 					color='red'
 					onClick={() => {
@@ -112,7 +117,7 @@ function DebouncedApplication({
 					}}
 				/>
 			</Tooltip>
-			<Group w={'100%'} justify='center'>
+			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}
@@ -140,11 +145,11 @@ function DebouncedApplication({
 					}}
 				/>
 			</Group>
-			<Group w={'100%'} justify='center'>
+			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'URL'}
 					className={textInputClasses.settingsItem}
-					w={'100%'}
+					w={isMobile ? undefined : '100%'}
 					pt={16}
 					classNames={textInputClasses}
 					defaultValue={app.url}
@@ -156,9 +161,12 @@ function DebouncedApplication({
 					}}
 				/>
 			</Group>
-			<Group w={'100%'} justify='space-between'>
+			<Group
+				justify='space-between'
+				style={{ flexDirection: isMobile ? 'column' : 'row' }}
+			>
 				<Select
-					w={'48%'}
+					w={isMobile ? '80%' : '48%'}
 					label={'Icon'}
 					className={selectClasses.settingsItem}
 					classNames={{