fix: mobile view (#801)

* fix: mobile view project roles

* fix: mobile view users

frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx

@@ -17,12 +17,14 @@ import useProjectRolesApi from '../../../../../hooks/api/actions/useProjectRoles
 import useToast from '../../../../../hooks/useToast';
 import ProjectRoleDeleteConfirm from '../ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm';
 import { formatUnknownError } from '../../../../../utils/format-unknown-error';
+import { useStyles } from './ProjectRoleListItem/ProjectRoleListItem.styles';
 
 const ROOTROLE = 'root';
 
 const ProjectRoleList = () => {
     const { hasAccess } = useContext(AccessContext);
     const { roles } = useProjectRoles();
+    const styles = useStyles();
 
     const paginationFilter = (role: IRole) => role?.type !== ROOTROLE;
 
@@ -76,9 +78,11 @@ const ProjectRoleList = () => {
             <Table>
                 <TableHead>
                     <TableRow>
-                        <TableCell></TableCell>
+                        <TableCell className={styles.hideXS}></TableCell>
                         <TableCell>Project Role</TableCell>
-                        <TableCell>Description</TableCell>
+                        <TableCell className={styles.hideSM}>
+                            Description
+                        </TableCell>
                         <TableCell align="right">
                             {hasAccess(ADMIN) ? 'Action' : ''}
                         </TableCell>

frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts

@@ -13,4 +13,21 @@ export const useStyles = makeStyles(theme => ({
     icon: {
         color: theme.palette.grey[600],
     },
+    description: {
+        textAlign: 'left',
+        maxWidth: '300px',
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
+    hideSM: {
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
+    hideXS: {
+        [theme.breakpoints.down('xs')]: {
+            display: 'none',
+        },
+    },
 }));

frontend/src/component/admin/project-roles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx

@@ -33,7 +33,7 @@ const RoleListItem = ({
     return (
         <>
             <TableRow className={styles.tableRow}>
-                <TableCell>
+                <TableCell className={styles.hideXS}>
                     <SupervisedUserCircleIcon className={styles.icon} />
                 </TableCell>
                 <TableCell className={styles.leftTableCell}>
@@ -41,7 +41,7 @@ const RoleListItem = ({
                         {name}
                     </Typography>
                 </TableCell>
-                <TableCell className={styles.leftTableCell}>
+                <TableCell className={styles.description}>
                     <Typography variant="body2" data-loading>
                         {description}
                     </Typography>

frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.styles.ts

@@ -9,4 +9,14 @@ export const useStyles = makeStyles(theme => ({
     leftTableCell: {
         textAlign: 'left',
     },
+    hideSM: {
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
+    hideXS: {
+        [theme.breakpoints.down('xs')]: {
+            display: 'none',
+        },
+    },
 }));

frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx

@@ -37,7 +37,7 @@ const UserListItem = ({
 
     return (
         <TableRow key={user.id} className={styles.tableRow}>
-            <TableCell>
+            <TableCell className={styles.hideXS}>
                 <Avatar
                     data-loading
                     alt={user.name}
@@ -47,7 +47,7 @@ const UserListItem = ({
                     })`}
                 />
             </TableCell>
-            <TableCell>
+            <TableCell className={styles.hideSM}>
                 <span data-loading>
                     {formatDateYMD(user.createdAt, locationSettings.locale)}
                 </span>
@@ -57,12 +57,12 @@ const UserListItem = ({
                     {user.name}
                 </Typography>
             </TableCell>
-            <TableCell className={styles.leftTableCell}>
+            <TableCell className={`${styles.leftTableCell} ${styles.hideSM}`}>
                 <Typography variant="body2" data-loading>
                     {user.username || user.email}
                 </Typography>
             </TableCell>
-            <TableCell align="center">
+            <TableCell align="center" className={styles.hideXS}>
                 <Typography variant="body2" data-loading>
                     {renderRole(user.rootRole)}
                 </Typography>

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -25,8 +25,10 @@ import IRole from '../../../../interfaces/role';
 import useToast from '../../../../hooks/useToast';
 import { useLocationSettings } from '../../../../hooks/useLocationSettings';
 import { formatUnknownError } from '../../../../utils/format-unknown-error';
+import { useStyles } from './UserListItem/UserListItem.styles';
 
 const UsersList = () => {
+    const styles = useStyles();
     const { users, roles, refetch, loading } = useUsers();
     const { setToastData, setToastApiError } = useToast();
     const {
@@ -133,13 +135,17 @@ const UsersList = () => {
             <Table>
                 <TableHead>
                     <TableRow>
-                        <TableCell></TableCell>
+                        <TableCell className={styles.hideXS}></TableCell>
-                        <TableCell>Created</TableCell>
+                        <TableCell className={styles.hideSM}>Created</TableCell>
                         <TableCell>Name</TableCell>
-                        <TableCell>Username</TableCell>
+                        <TableCell className={styles.hideSM}>
-                        <TableCell align="center">Role</TableCell>
+                            Username
+                        </TableCell>
+                        <TableCell align="center" className={styles.hideXS}>
+                            Role
+                        </TableCell>
                         <TableCell align="right">
-                            {hasAccess(ADMIN) ? 'Action' : ''}
+                            {hasAccess(ADMIN) ? 'Actions' : ''}
                         </TableCell>
                     </TableRow>
                 </TableHead>