updated the ui for the mobile view

src/pages/nearle/accountsettings.js

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { Grid, useMediaQuery, useTheme } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import CircularLoader from 'components/CircularLoader';
 import Loader from 'components/Loader';
@@ -6,6 +6,8 @@ import MainCard from 'components/MainCard';
 import { getusers } from 'pages/api/api';
 
 const ViewProfile = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const {
     data: userdata,
     isLoading,
@@ -23,8 +25,8 @@ const ViewProfile = () => {
           <CircularLoader />
         </>
       )}
-      <MainCard>
-        <Grid container spacing={3}>
+      <MainCard sx={{ p: { xs: 1.5, md: 3 } }}>
+        <Grid container spacing={isMobile ? 2 : 3}>
           <Grid item xs={12} sm={6} md={4}>
             {userdata?.firstname}
           </Grid>