Mobile and style improvements

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

@@ -1,6 +1,7 @@
 import {
 	ActionIcon,
 	Button,
+	Card,
 	Divider,
 	Grid,
 	GridCol,
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
 import {
 	actionIconClasses,
 	buttonClasses,
+	cardClasses,
 	modalClasses,
 	textClasses,
 	textInputClasses,
@@ -79,48 +81,51 @@ const MessageSettings = () => {
 						<Modal.CloseButton />
 					</Modal.Header>
 					<Modal.Body pb={'2rem'}>
-						<Stack gap={0} w={'100%'} align='center'>
-							<TextInput
-								autoFocus
-								w={'75%'}
-								className={textInputClasses.settingsItem}
-								classNames={textInputClasses}
-								onChange={(event) => {
-									setNewMessage(event.target.value);
-								}}
-								error={newMessageError}
-							/>
-							<Divider color='black' my='sm' />
-							<Group pos={'absolute'} bottom={8}>
-								<Button
-									color={'green'}
-									styles={{ label: { color: 'black' } }}
-									onClick={() => {
-										if (newMessage) {
-											mutateAsync({
-												method: 'POST',
-												endpoint: endpoint,
-												body: { message: newMessage },
-											});
+						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+							<Stack gap={0} w={'100%'} align='center'>
+								<TextInput
+									label='Message text'
+									autoFocus={!isMobile}
+									w={'75%'}
+									className={textInputClasses.settingsItem}
+									classNames={textInputClasses}
+									onChange={(event) => {
+										setNewMessage(event.target.value);
+									}}
+									error={newMessageError}
+								/>
+								<Divider color='black' my='lg' />
+								<Group pos={'absolute'} bottom={8}>
+									<Button
+										color={'green'}
+										styles={{ label: { color: 'black' } }}
+										onClick={() => {
+											if (newMessage) {
+												mutateAsync({
+													method: 'POST',
+													endpoint: endpoint,
+													body: { message: newMessage },
+												});
+												closeModal();
+											} else {
+												setNewMessageError('Please enter a message');
+											}
+										}}
+									>
+										Save
+									</Button>
+									<Button
+										color={'red'}
+										styles={{ label: { color: 'black' } }}
+										onClick={() => {
 											closeModal();
-										} else {
-											setNewMessageError('Please enter a message');
-										}
-									}}
-								>
-									Save
-								</Button>
-								<Button
-									color={'red'}
-									styles={{ label: { color: 'black' } }}
-									onClick={() => {
-										closeModal();
-									}}
-								>
-									Cancel
-								</Button>
-							</Group>
-						</Stack>
+										}}
+									>
+										Cancel
+									</Button>
+								</Group>
+							</Stack>
+						</Card>
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
@@ -183,7 +188,7 @@ const MessageSettings = () => {
 					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
-					autoFocus
+					autoFocus={!isMobile}
 					placeholder='Search...'
 					value={searchValue}
 					onInput={(event: any) => {