diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts index 6f7d6e9777..123c9512fe 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts +++ b/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', + }, }, })); diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx index 89737a8870..cba689ba35 100644 --- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx +++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.tsx @@ -111,6 +111,7 @@ export const CellSortable: FC = ({ className={styles.label} ref={ref} tabIndex={-1} + data-text={children} > {children}