updated the ui for the mobile view

src/pages/nearle/viewProfile.js

@@ -1,4 +1,5 @@
-import { Grid, TextField, Typography } from '@mui/material';
+import { Grid, TextField, Typography, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { useQuery } from '@tanstack/react-query';
 import CircularLoader from 'components/CircularLoader';
 import Loader from 'components/Loader';
@@ -6,6 +7,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,13 +26,14 @@ const ViewProfile = () => {
       )}
 
       <MainCard
+        contentSX={{ p: isMobile ? 2 : 3 }}
         title={
-          <Typography variant="h3" sx={{ m: 3 }}>
+          <Typography variant="h3" sx={{ m: { xs: 1.5, md: 3 } }}>
             User Profile
           </Typography>
         }
       >
-        <Grid container spacing={4}>
+        <Grid container spacing={{ xs: 2.5, md: 4 }}>
           {/* ==============================|| userid ||==============================  */}
           <Grid item xs={12} sm={6} md={4}>
             <TextField