diff --git a/interface/src/project/DashboardDevices.tsx b/interface/src/project/DashboardDevices.tsx index 51e55f1e0..8a337d8ac 100644 --- a/interface/src/project/DashboardDevices.tsx +++ b/interface/src/project/DashboardDevices.tsx @@ -11,7 +11,6 @@ import StarIcon from '@mui/icons-material/Star'; import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined'; import { Button, - Typography, Dialog, DialogTitle, DialogContent, @@ -21,7 +20,8 @@ import { ListItem, ListItemText, FormControlLabel, - Checkbox + Checkbox, + Box } from '@mui/material'; import { useRowSelect } from '@table-library/react-table-library/select'; import { useSort, SortToggleType } from '@table-library/react-table-library/sort'; @@ -47,6 +47,9 @@ import { AuthenticatedContext } from 'contexts/authentication'; import { useI18nContext } from 'i18n/i18n-react'; import { extractErrorMessage } from 'utils'; +const topOffset = () => document.getElementById('devices-window')?.getBoundingClientRect().bottom || 0; +const leftOffset = () => document.getElementById('devices-window')?.getBoundingClientRect().left || 0; + const DashboardDevices: FC = () => { const { me } = useContext(AuthenticatedContext); const { LL } = useI18nContext(); @@ -416,10 +419,18 @@ const DashboardDevices: FC = () => { ); return ( - <> - - {deviceData.label} - + leftOffset(), + top: () => topOffset(), + p: 1 + }} + > setOnlyFav(!onlyFav)} />} label={ @@ -488,12 +499,12 @@ const DashboardDevices: FC = () => { )} - + ); }; return ( - + {renderCoreData()} {renderDeviceData()} {renderDeviceDetails()}