From f23a8a9fca920b73094d783a97d9dda03028526d Mon Sep 17 00:00:00 2001
From: Koosha Lahouti <koosha@Kooshas-MacBook-Air.local>
Date: Wed, 6 Aug 2025 14:34:29 -0700
Subject: [PATCH] fix: styles

---
 .../activeDevices/ActiveDevices.tsx           | 221 +++++++++---------
 .../components/security/RecentLogins.tsx      | 131 ++++++-----
 src/features/profile/routes/SettingPage.tsx   |   8 +-
 3 files changed, 188 insertions(+), 172 deletions(-)

diff --git a/src/features/profile/components/activeDevices/ActiveDevices.tsx b/src/features/profile/components/activeDevices/ActiveDevices.tsx
index 941d3d7..ef95546 100644
--- a/src/features/profile/components/activeDevices/ActiveDevices.tsx
+++ b/src/features/profile/components/activeDevices/ActiveDevices.tsx
@@ -1,4 +1,10 @@
-import { Box, Typography, Button } from '@mui/material';
+import {
+  Box,
+  Typography,
+  Button,
+  useTheme,
+  useMediaQuery,
+} from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { DeviceMessage, Logout } from 'iconsax-react';
 import Logo from '@/components/Logo';
@@ -38,6 +44,8 @@ export function ActiveDevices() {
       current: false,
     },
   ];
+  const theme = useTheme();
+  const isXsup = useMediaQuery(theme.breakpoints.up('xs'));
 
   return (
     <PageWrapper>
@@ -75,118 +83,123 @@ export function ActiveDevices() {
           }}
         >
           {devices.map((device) => (
-            <Box
-              key={device.id}
-              sx={{
-                display: 'flex',
-                flexDirection: { xs: 'column', sm: 'row' },
-                alignItems: { xs: 'flex-start', sm: 'center' },
-                minHeight: 50,
-              }}
-            >
-              <Typography
-                variant="body2"
-                sx={{
-                  flexBasis: { xs: '100%', sm: 'auto' },
-                  mb: { xs: 1, sm: 0 },
-                  minWidth: { sm: '138px' },
-                  order: { xs: 1, sm: 1 },
-                }}
-              >
-                {device.timeAndDate}
-              </Typography>
-
+            <>
               <Box
+                key={device.id}
                 sx={{
                   display: 'flex',
-                  alignItems: 'center',
-                  gap: 1,
-                  flexBasis: { xs: '100%', sm: 'auto' },
-                  mb: { xs: 1, sm: 0 },
-                  minWidth: { sm: '138px' },
-                  order: { xs: 2, sm: 2 },
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  alignItems: { xs: 'flex-start', sm: 'center' },
+                  minHeight: 50,
                 }}
               >
-                <DeviceMessage size={24} color="#82B1FF" />
-                <Typography variant="body2" noWrap>
-                  {device.deviceModel}
-                </Typography>
-              </Box>
-
-              <Typography
-                variant="body2"
-                sx={{
-                  flexBasis: { xs: '100%', sm: 'auto' },
-                  mb: { xs: 1, sm: 0 },
-                  minWidth: { sm: '138px' },
-                  order: { xs: 3, sm: 3 },
-                }}
-              >
-                {device.ip}
-              </Typography>
-
-              <Box
-                sx={{
-                  flexBasis: { xs: '100%', sm: 'auto' },
-                  mb: { xs: 1, sm: 0 },
-                  textAlign: { xs: 'left', sm: 'center' },
-                  minWidth: { sm: '138px' },
-                  order: { xs: 4, sm: 4 },
-                }}
-              >
-                {device.current && (
-                  <Button
-                    variant="outlined"
-                    sx={{
-                      borderRadius: '15px',
-                      border: '2px solid',
-                      borderColor: 'success.main',
-                      height: '30px',
-                      whiteSpace: 'nowrap',
-                      color: 'success.main',
-                      textTransform: 'none',
-                    }}
-                  >
-                    {t('active.currentDevice')}
-                  </Button>
-                )}
-              </Box>
-
-              <Box
-                sx={{
-                  flexBasis: { xs: '100%', sm: 'auto' },
-                  mb: { xs: 1, sm: 0 },
-                  textAlign: { xs: 'left', sm: 'center' },
-                  minWidth: { sm: '150px' },
-                  order: { xs: 5, sm: 5 },
-                }}
-              >
-                <Button
-                  size="small"
-                  variant="outlined"
-                  startIcon={<Logout size={18} color="#E53935" />}
-                  disabled={device.current}
+                <Typography
+                  variant="body2"
                   sx={{
-                    color: 'error.main',
-                    minWidth: 0,
-                    borderRadius: '15px',
-                    borderColor: 'error.main',
-                    p: '4px 8px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    whiteSpace: 'nowrap',
-                    textTransform: 'none',
-                    '& .MuiButton-startIcon': {
-                      marginRight: '4px',
-                      marginLeft: 0,
-                    },
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '138px' },
+                    order: { xs: 1, sm: 1 },
                   }}
                 >
-                  {t('active.deleteDevice')}
-                </Button>
+                  {device.timeAndDate}
+                </Typography>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '138px' },
+                    order: { xs: 2, sm: 2 },
+                  }}
+                >
+                  <DeviceMessage size={24} color="#82B1FF" />
+                  <Typography variant="body2" noWrap>
+                    {device.deviceModel}
+                  </Typography>
+                </Box>
+
+                <Typography
+                  variant="body2"
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    minWidth: { sm: '138px' },
+                    order: { xs: 3, sm: 3 },
+                  }}
+                >
+                  {device.ip}
+                </Typography>
+
+                <Box
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    textAlign: { xs: 'left', sm: 'center' },
+                    minWidth: { sm: '138px' },
+                    order: { xs: 4, sm: 4 },
+                  }}
+                >
+                  {device.current && (
+                    <Button
+                      variant="outlined"
+                      sx={{
+                        borderRadius: '15px',
+                        border: '2px solid',
+                        borderColor: 'success.main',
+                        height: '30px',
+                        whiteSpace: 'nowrap',
+                        color: 'success.main',
+                        textTransform: 'none',
+                      }}
+                    >
+                      {t('active.currentDevice')}
+                    </Button>
+                  )}
+                </Box>
+
+                <Box
+                  sx={{
+                    flexBasis: { xs: '100%', sm: 'auto' },
+                    mb: { xs: 1, sm: 0 },
+                    textAlign: { xs: 'left', sm: 'center' },
+                    minWidth: { sm: '150px' },
+                    order: { xs: 5, sm: 5 },
+                  }}
+                >
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    startIcon={<Logout size={18} color="#E53935" />}
+                    disabled={device.current}
+                    sx={{
+                      color: 'error.main',
+                      minWidth: 0,
+                      borderRadius: '15px',
+                      borderColor: 'error.main',
+                      p: '4px 8px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      whiteSpace: 'nowrap',
+                      textTransform: 'none',
+                      '& .MuiButton-startIcon': {
+                        marginRight: '4px',
+                        marginLeft: 0,
+                      },
+                    }}
+                  >
+                    {t('active.deleteDevice')}
+                  </Button>
+                </Box>
               </Box>
-            </Box>
+              {isXsup && (
+                <Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
+              )}
+            </>
           ))}
         </Box>
       </CardContainer>
diff --git a/src/features/profile/components/security/RecentLogins.tsx b/src/features/profile/components/security/RecentLogins.tsx
index 69911a1..adf3910 100644
--- a/src/features/profile/components/security/RecentLogins.tsx
+++ b/src/features/profile/components/security/RecentLogins.tsx
@@ -46,75 +46,78 @@ export function RecentLogins() {
         >
           <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
             {data.map((d) => (
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexDirection: { xs: 'column', sm: 'row' },
-                  alignItems: { xs: 'flex-start', sm: 'center' },
-                  minHeight: 50,
-                }}
-                key={d.id}
-              >
-                <Typography
-                  variant="body2"
-                  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={{
-                    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={{
-                    flexBasis: { xs: '100%', sm: 'auto' },
-                    mb: { xs: 1, sm: 0 },
-                    minWidth: { sm: '172.5px' },
-                    order: { xs: 1, sm: 1 },
-                  }}
-                >
-                  {d.ip}
-                </Typography>
+              <>
                 <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 },
+                    display: 'flex',
+                    flexDirection: { xs: 'column', sm: 'row' },
+                    alignItems: { xs: 'flex-start', sm: 'center' },
+                    minHeight: 50,
                   }}
+                  key={d.id}
                 >
-                  {d.current && (
-                    <Button
-                      variant="outlined"
-                      sx={{
-                        borderRadius: '15px',
-                        border: '2px solid',
-                        borderColor: 'success.main',
-                        height: '30px',
-                        whiteSpace: 'nowrap',
-                        color: 'success.main',
-                        textTransform: 'none',
-                      }}
-                    >
-                      {t('securityForm.currentDevice')}
-                    </Button>
-                  )}
+                  <Typography
+                    variant="body2"
+                    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={{
+                      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={{
+                      flexBasis: { xs: '100%', sm: 'auto' },
+                      mb: { xs: 1, sm: 0 },
+                      minWidth: { sm: '172.5px' },
+                      order: { xs: 1, sm: 1 },
+                    }}
+                  >
+                    {d.ip}
+                  </Typography>
+                  <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"
+                        sx={{
+                          borderRadius: '15px',
+                          border: '2px solid',
+                          borderColor: 'success.main',
+                          height: '30px',
+                          whiteSpace: 'nowrap',
+                          color: 'success.main',
+                          textTransform: 'none',
+                        }}
+                      >
+                        {t('securityForm.currentDevice')}
+                      </Button>
+                    )}
+                  </Box>
                 </Box>
-              </Box>
+                <Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
+              </>
             ))}
           </Box>
         </Box>
diff --git a/src/features/profile/routes/SettingPage.tsx b/src/features/profile/routes/SettingPage.tsx
index b6e7c7d..3c8069f 100644
--- a/src/features/profile/routes/SettingPage.tsx
+++ b/src/features/profile/routes/SettingPage.tsx
@@ -69,9 +69,6 @@ export function Layout() {
   const location = useLocation();
   const { t } = useTranslation('sideMap');
   const [drawerOpen, setDrawerOpen] = useState(false);
-
-  const contentMaxWidth = '100%';
-  // const contentWidthMd = '810px';
   const navWidthMd = '274px';
 
   const navConfig: NavItemConfig[] = [
@@ -197,13 +194,16 @@ export function Layout() {
     >
       <Box
         width={{ xs: '100vw', md: 1100 }}
-        height={{ xs: '100vh', md: 800 }}
+        height="100vh"
         display="flex"
         flexDirection="column"
         bgcolor="background.paper"
         overflow="hidden"
         borderRadius={{ xs: 0, md: 2 }}
         boxShadow={{ xs: 0, md: 3 }}
+        sx={{
+          overflow: 'hidden',
+        }}
       >
         {!isMdUp && (
           <AppBar position="static" elevation={0}>