fix: add after element to column headers (#1000)

* fix: add after element to column headers

* fix: add overflow hidden

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts

@@ -40,9 +40,19 @@ export const useStyles = makeStyles()(theme => ({
         fontWeight: theme.fontWeight.bold,
     },
     label: {
+        display: 'flex',
+        flexDirection: 'column',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
         overflowX: 'hidden',
         overflowY: 'visible',
+        '::after': {
+            fontWeight: 'bold',
+            display: 'inline-block',
+            height: 0,
+            content: 'attr(data-text)',
+            visibility: 'hidden',
+            overflow: 'hidden',
+        },
     },
 }));

frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx

@@ -111,6 +111,7 @@ export const CellSortable: FC<ICellSortableProps> = ({
                                 className={styles.label}
                                 ref={ref}
                                 tabIndex={-1}
+                                data-text={children}
                             >
                                 {children}
                             </span>