Formatting and typos

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

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
 function DebouncedWolClient({ wolClient, handleDelete }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
@@ -43,6 +43,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -60,7 +61,7 @@ function DebouncedWolClient({ wolClient, handleDelete }: any) {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Delete Client</Modal.Title>
+						<Modal.Title>Delete WoL Client</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>

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

@@ -1,14 +1,16 @@
 import { Card, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { FaLaptop } from 'react-icons/fa';
 import { cardClasses } from 'styles';
 
 function WolClientSettingsItem({ client }: any) {
+	const { isMobile } = useCommonHooks();
 	return (
 		<Card
 			className={cardClasses.settingsItemHover}
 			classNames={cardClasses}
 			h={200}
-			w={200}
+			w={isMobile ? '100%' : 200}
 		>
 			<Stack align='center' gap={0}>
 				<FaLaptop fontSize={100} />

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

@@ -34,7 +34,7 @@ const WolClientSettings = () => {
 	});
 	const [wolClients, setWolClients] = useState<any>([]);
 	const { mutateAsync } = useMutationAPI();
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [newWolClient, setNewWolClient] = useState<any>({
 		hostname: '',
 		macAddress: '',
@@ -62,6 +62,7 @@ const WolClientSettings = () => {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -79,7 +80,7 @@ const WolClientSettings = () => {
 				<Modal.Overlay />
 				<Modal.Content>
 					<Modal.Header>
-						<Modal.Title>Add a new application</Modal.Title>
+						<Modal.Title>Add a new WoL Client</Modal.Title>
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>
@@ -206,7 +207,7 @@ const WolClientSettings = () => {
 			<Stack w={'100%'} align='center'>
 				<Grid columns={18} w={'75%'}>
 					{wolClients?.map((client: any) => (
-						<GridCol span={6} key={client.id}>
+						<GridCol span={isMobile ? 18 : 6} key={client.id}>
 							<Popover withArrow withOverlay withinPortal={false}>
 								<Popover.Target>
 									<Box