Formatting and typos

src/pages/settings/components/Messages/DebouncedMessage.tsx

@@ -15,7 +15,7 @@ import { useCommonHooks } from 'hooks';
 import { cardClasses, modalClasses, textInputClasses } from 'styles';
 
 function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	return (
 		<Card className={cardClasses.settingsItem} classNames={cardClasses}>
@@ -24,6 +24,7 @@ function DebouncedMessage({ label, message, setMessage, handleDelete }: any) {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}

src/pages/settings/components/Messages/Messages.tsx

@@ -29,7 +29,7 @@ const MessageSettings = () => {
 	const { data: messageData, isFetched: isMessagesFetched } = useQueryAPI({
 		endpoint: 'api/messages',
 	});
-	const { theme } = useCommonHooks();
+	const { theme, isMobile } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
 	const [messages, setMessages] = useState<any>([]);
 	const [newMessage, setNewMessage] = useState('');
@@ -67,6 +67,7 @@ const MessageSettings = () => {
 				className={modalClasses.helpModal}
 				classNames={modalClasses}
 				opened={modalOpened}
+				fullScreen={isMobile}
 				onClose={() => {
 					closeModal();
 				}}
@@ -197,7 +198,7 @@ const MessageSettings = () => {
 			<Stack w={'100%'} align='center'>
 				<Grid w={'75%'}>
 					{messages?.map((message: any) => (
-						<GridCol span={6} key={message.id}>
+						<GridCol span={isMobile ? 12 : 6} key={message.id}>
 							<DebouncedMessage
 								label={`ID# ${message.id}`}
 								message={message}