updated the ui for the mobile view

src/pages/nearle/clients/createclient.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 // material-ui
 import { useTheme } from '@mui/material/styles';
-import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
+import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography, useMediaQuery } from '@mui/material';
 
 // third-party
 // import { PatternFormat } from 'react-number-format';
@@ -32,6 +32,7 @@ import { useNavigate } from 'react-router';
 
 const Createclient = () => {
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   // const [role, setRole] = useState('');
   const [mobilenumber, setMobilenumber] = useState('');
   const [emailaddress, setEmailaddress] = useState('');
@@ -299,8 +300,8 @@ const Createclient = () => {
           <Typography variant="h3">Create Client</Typography>
         </Stack>
       </Grid>
-      <MainCard>
-        <Grid container spacing={3}>
+      <MainCard contentSX={{ p: { xs: 1.5, md: 3 } }}>
+        <Grid container spacing={isMobile ? 2 : 3}>
           {/* <Grid item xs={12} sm={4} >
                     <MainCard title="Personal Information" sx={{ height: '100%' }}>
                         <Grid container spacing={3}>
@@ -396,8 +397,9 @@ const Createclient = () => {
             <MainCard
               // title="Contact Information"
               sx={{ height: '100%' }}
+              contentSX={{ p: { xs: 1.5, md: 2.5 } }}
             >
-              <Grid container spacing={3}>
+              <Grid container spacing={isMobile ? 2 : 3}>
                 {/* <Grid item xs={12} sm={6}>
                                 <Stack spacing={1.25}>
                                     <InputLabel htmlFor="personal-first-name">Business Name</InputLabel>
@@ -589,8 +591,13 @@ const Createclient = () => {
             </MainCard>
           </Grid>
           <Grid item xs={12}>
-            <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
-              <Button variant="contained" onClick={() => createprofile()}>
+            <Stack
+              direction={{ xs: 'column', sm: 'row' }}
+              justifyContent="flex-end"
+              alignItems={{ xs: 'stretch', sm: 'center' }}
+              spacing={2}
+            >
+              <Button variant="contained" onClick={() => createprofile()} fullWidth={isMobile}>
                 Create
               </Button>
             </Stack>