fix: styles

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,6 +83,7 @@ export function ActiveDevices() {
           }}
         >
           {devices.map((device) => (
+            <>
               <Box
                 key={device.id}
                 sx={{
@@ -187,6 +196,10 @@ export function ActiveDevices() {
                   </Button>
                 </Box>
               </Box>
+              {isXsup && (
+                <Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
+              )}
+            </>
           ))}
         </Box>
       </CardContainer>

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

@@ -46,6 +46,7 @@ export function RecentLogins() {
         >
           <Box sx={{ width: '100%', maxWidth: '754px', px: 4 }}>
             {data.map((d) => (
+              <>
                 <Box
                   sx={{
                     display: 'flex',
@@ -115,6 +116,8 @@ export function RecentLogins() {
                     )}
                   </Box>
                 </Box>
+                <Box sx={{ color: 'divider', borderBottom: '1px solid' }} />
+              </>
             ))}
           </Box>
         </Box>

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}>