fix: account active sessions styles

src/features/profile/routes/ActiveDevicesPage.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import {
   Box,
   Typography,
   Button,
-  useTheme,
-  useMediaQuery,
   CircularProgress,
+  Stack,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { DeviceMessage, Logout } from 'iconsax-react';
@@ -24,8 +23,6 @@ export function ActiveDevicesPage() {
   const { t, i18n } = useTranslation('setting');
   const [devices, setDevices] = useState<Device[]>([]);
   const [loadingDeleteIds, setLoadingDeleteIds] = useState<string[]>([]);
-  const theme = useTheme();
-  const isXsup = useMediaQuery(theme.breakpoints.up('xs'));
   const showToast = useToast();
 
   const { isLoadingProfile, refetchProfile } = useProfile();
@@ -132,7 +129,9 @@ export function ActiveDevicesPage() {
                 flexGrow: 0,
                 width: 'auto',
               }}
-              disabled={isLoadingProfile || isTerminating}
+              disabled={
+                isLoadingProfile || isTerminating || devices.length === 1
+              }
             >
               {isTerminating
                 ? t('active.deleting')
@@ -158,20 +157,23 @@ export function ActiveDevicesPage() {
             sx={{
               mx: { xs: 2, sm: 3, md: 4 },
               py: 2,
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2,
               bgcolor: 'background.paper',
             }}
           >
             {devices.map((device) => (
-              <React.Fragment key={device.id}>
+              <Stack
+                alignItems="center"
+                justifyContent="space-between"
+                flexDirection="row"
+                key={device.id}
+              >
                 <Box
                   sx={{
                     display: 'flex',
                     flexDirection: { xs: 'column', sm: 'row' },
                     alignItems: { xs: 'flex-start', sm: 'center' },
                     minHeight: 50,
+                    gap: 0.5,
                     py: 1.5,
                   }}
                 >
@@ -217,17 +219,7 @@ export function ActiveDevicesPage() {
                   >
                     {device.ip}
                   </Typography>
-
+                </Box>
-                  <Box
-                    sx={{
-                      flexBasis: { xs: '100%', sm: 'auto' },
-                      mb: { xs: 1, sm: 0 },
-                      minWidth: { sm: '126px' },
-                      order: { xs: 4, sm: 4 },
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
                 {device.current && (
                   <Button
                     variant="outlined"
@@ -250,17 +242,8 @@ export function ActiveDevicesPage() {
                     {t('active.currentDevice')}
                   </Button>
                 )}
-                  </Box>
 
-                  <Box
+                {!device.current && (
-                    sx={{
-                      flexBasis: { xs: '100%', sm: 'auto' },
-                      mb: { xs: 1, sm: 0 },
-                      textAlign: { xs: 'left', sm: 'center' },
-                      minWidth: { sm: '138px' },
-                      order: { xs: 5, sm: 5 },
-                    }}
-                  >
                   <Button
                     size="small"
                     variant="outlined"
@@ -268,34 +251,22 @@ export function ActiveDevicesPage() {
                     disabled={
                       device.current || loadingDeleteIds.includes(device.id)
                     }
+                    loading={loadingDeleteIds.includes(device.id)}
                     onClick={() => handleDeleteDevice(device.id)}
                     sx={{
                       color: 'error.main',
                       borderRadius: 1,
                       borderColor: 'error.main',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        whiteSpace: 'nowrap',
-                        textTransform: 'none',
                       '& .MuiButton-startIcon': {
                         marginRight: 0.5,
                         marginLeft: 0,
                       },
                     }}
                   >
-                      {loadingDeleteIds.includes(device.id) ? (
+                    {t('active.deleteDevice')}
-                        <CircularProgress size={20} color="error" />
-                      ) : (
-                        t('active.deleteDevice')
-                      )}
                   </Button>
-                  </Box>
-                </Box>
-                {isXsup && (
-                  <Box sx={{ borderBottom: 1, borderColor: 'divider' }} />
                 )}
-              </React.Fragment>
+              </Stack>
             ))}
           </Box>
         )}