fix: users table sort header styles

frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts

@@ -2,13 +2,10 @@ import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
     tableCellHeaderSortable: {
+        padding: 0,
+        position: 'relative',
         cursor: 'pointer',
-        '&:hover': {
+        overflow: 'hidden',
-            backgroundColor: theme.v2.palette.grey[40],
-            '& > svg': {
-                color: theme.v2.palette.grey[90],
-            },
-        },
         '& > svg': {
             fontSize: theme.v2.fontSizes.headerIcon,
             verticalAlign: 'middle',
@@ -24,8 +21,22 @@ export const useStyles = makeStyles(theme => ({
     },
     sortButton: {
         all: 'unset',
+        padding: theme.spacing(2),
+        width: '100%',
         '&:focus-visible, &:active': {
             outline: 'revert',
         },
+        display: 'flex',
+        alignItems: 'center',
+        '&:hover': {
+            backgroundColor: theme.v2.palette.grey[40],
+            '& > svg': {
+                color: theme.v2.palette.grey[90],
+            },
+        },
+    },
+    icon: {
+        marginLeft: theme.spacing(0.5),
+        fontSize: theme.v2.fontSizes.headerIcon,
     },
 }));

frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx

@@ -60,18 +60,33 @@ export const TableCellSortable = ({
         <TableCell aria-sort={ariaSort} className={cellClassName}>
             <button className={styles.sortButton} onClick={onSortClick}>
                 {children}
+                <ConditionallyRender
+                    condition={sort.type === name}
+                    show={
+                        <ConditionallyRender
+                            condition={Boolean(sort.desc)}
+                            show={
+                                <KeyboardArrowDown
+                                    className={styles.icon}
+                                    fontSize="inherit"
+                                />
+                            }
+                            elseShow={
+                                <KeyboardArrowUp
+                                    className={styles.icon}
+                                    fontSize="inherit"
+                                />
+                            }
+                        />
+                    }
+                    elseShow={
+                        <UnfoldMoreOutlined
+                            className={styles.icon}
+                            fontSize="inherit"
+                        />
+                    }
+                />
             </button>
-            <ConditionallyRender
-                condition={sort.type === name}
-                show={
-                    <ConditionallyRender
-                        condition={Boolean(sort.desc)}
-                        show={<KeyboardArrowDown />}
-                        elseShow={<KeyboardArrowUp />}
-                    />
-                }
-                elseShow={<UnfoldMoreOutlined />}
-            />
         </TableCell>
     );
 };