From c28cdab6e8cb639ee70b75738fef28004f4fc2d4 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Fri, 20 May 2022 09:58:26 +0200
Subject: [PATCH] fix: add after element to column headers (#1000)

* fix: add after element to column headers

* fix: add overflow hidden
---
 .../CellSortable/CellSortable.styles.ts                | 10 ++++++++++
 .../SortableTableHeader/CellSortable/CellSortable.tsx  |  1 +
 2 files changed, 11 insertions(+)

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<ICellSortableProps> = ({
                                 className={styles.label}
                                 ref={ref}
                                 tabIndex={-1}
+                                data-text={children}
                             >
                                 {children}
                             </span>