fix: responsiveness of sideNav component

src/features/profile/components/security/RecentLogins.tsx

@@ -1,6 +1,7 @@
 import { Box, Typography, Button } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
+import { PageWrapper } from '../PageWrapper';
 
 export function RecentLogins() {
   const { t } = useTranslation('security');
@@ -22,27 +23,25 @@ export function RecentLogins() {
   ];
 
   return (
-    <Box
-      sx={{
-        mx: 'auto',
-        backgroundColor: 'background.paper',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
+    <PageWrapper>
       <CardContainer
         title={t('securityForm.recentLogins')}
         subtitle={t('securityForm.description')}
       >
         <Box
           sx={{
-            px: { xs: 2, sm: 3, md: 4 },
+            // px: { xs: 2, sm: 3, md: 4 },
             py: 2,
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
             bgcolor: 'background.paper',
             flex: 1,
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            '&:last-child': {
+              borderBottom: 'none',
+            },
           }}
         >
           <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
@@ -50,31 +49,54 @@ export function RecentLogins() {
               <Box
                 sx={{
                   display: 'flex',
-                  alignItems: 'center',
-                  gap: 1,
-                  height: '50px',
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  alignItems: { xs: 'flex-start', sm: 'center' },
+                  minHeight: 50,
                 }}
                 key={d.id}
               >
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 1, sm: 1 },
+                  }}
                 >
                   {d.time}
                 </Typography>
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 1, sm: 1 },
+                  }}
                 >
                   {d.device}
                 </Typography>
                 <Typography
                   variant="body2"
-                  sx={{ width: { xs: '100%', sm: '172.5px' } }}
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 1, sm: 1 },
+                  }}
                 >
                   {d.ip}
                 </Typography>
-                <Box sx={{ width: { xs: '100%', sm: '172.5px' } }}>
+                <Box
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    textAlign: { xs: 'left', sm: 'center' },
+                    minWidth: { sm: '172.5px' },
+                    order: { xs: 4, sm: 4 },
+                  }}
+                >
                   {d.current && (
                     <Button
                       variant="outlined"
@@ -85,9 +107,7 @@ export function RecentLogins() {
                         height: '30px',
                         whiteSpace: 'nowrap',
                         color: 'success.main',
-                        width: '93px',
                         textTransform: 'none',
-                        fontSize: '0.75rem',
                       }}
                     >
                       {t('securityForm.currentDevice')}
@@ -99,6 +119,6 @@ export function RecentLogins() {
           </Box>
         </Box>
       </CardContainer>
-    </Box>
+    </PageWrapper>
   );
 }