From 4a420da4520727ed47bc34387d9cc455d34fcdb5 Mon Sep 17 00:00:00 2001
From: Sajad Mirjalili <sajadmrjll@gmail.com>
Date: Mon, 29 Sep 2025 13:47:45 +0330
Subject: [PATCH] fix: account active sessions styles

---
 .../profile/routes/ActiveDevicesPage.tsx      | 145 +++++++-----------
 1 file changed, 58 insertions(+), 87 deletions(-)

diff --git a/src/features/profile/routes/ActiveDevicesPage.tsx b/src/features/profile/routes/ActiveDevicesPage.tsx
index b5fc335..037f2d8 100644
--- a/src/features/profile/routes/ActiveDevicesPage.tsx
+++ b/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,85 +219,54 @@ export function ActiveDevicesPage() {
                   >
                     {device.ip}
                   </Typography>
-
-                  <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"
-                        size="medium"
-                        sx={{
-                          borderRadius: 12.5,
-                          border: '1px solid',
-                          borderColor: 'success.main',
-                          whiteSpace: 'nowrap',
-                          color: 'success.main',
-                          textTransform: 'none',
-                          maxWidth: '125px',
-                          '&.Mui-disabled': {
-                            color: 'success.main',
-                            borderColor: 'success.main',
-                          },
-                        }}
-                        disabled
-                      >
-                        {t('active.currentDevice')}
-                      </Button>
-                    )}
-                  </Box>
-
-                  <Box
-                    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"
-                      startIcon={<Icon Component={Logout} size="small" />}
-                      disabled={
-                        device.current || 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) ? (
-                        <CircularProgress size={20} color="error" />
-                      ) : (
-                        t('active.deleteDevice')
-                      )}
-                    </Button>
-                  </Box>
                 </Box>
-                {isXsup && (
-                  <Box sx={{ borderBottom: 1, borderColor: 'divider' }} />
+                {device.current && (
+                  <Button
+                    variant="outlined"
+                    size="medium"
+                    sx={{
+                      borderRadius: 12.5,
+                      border: '1px solid',
+                      borderColor: 'success.main',
+                      whiteSpace: 'nowrap',
+                      color: 'success.main',
+                      textTransform: 'none',
+                      maxWidth: '125px',
+                      '&.Mui-disabled': {
+                        color: 'success.main',
+                        borderColor: 'success.main',
+                      },
+                    }}
+                    disabled
+                  >
+                    {t('active.currentDevice')}
+                  </Button>
                 )}
-              </React.Fragment>
+
+                {!device.current && (
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    startIcon={<Icon Component={Logout} size="small" />}
+                    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',
+                      '& .MuiButton-startIcon': {
+                        marginRight: 0.5,
+                        marginLeft: 0,
+                      },
+                    }}
+                  >
+                    {t('active.deleteDevice')}
+                  </Button>
+                )}
+              </Stack>
             ))}
           </Box>
         )}