From a9a892945e6058c92c6e4f63255d799790a9bfa8 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Tue, 22 Feb 2022 15:42:05 +0200
Subject: [PATCH] fix: Position of arrows in Table chart (#18739)

* Fix arrow position

* Improve position

* Add right position

* Improve styling
---
 .../plugins/plugin-chart-table/src/Styles.tsx         |  6 ++----
 .../plugins/plugin-chart-table/src/TableChart.tsx     | 11 +++++++++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index d6993520fa..68bdc141d7 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -33,16 +33,14 @@ export default styled.div`
   }
 
   thead > tr > th {
-    padding-right: 1.4em;
+    padding-right: 0;
     position: relative;
     background: ${({ theme: { colors } }) => colors.grayscale.light5};
     text-align: left;
   }
   th svg {
     color: ${({ theme: { colors } }) => colors.grayscale.light2};
-    position: relative;
-    vertical-align: middle;
-    margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
+    margin: ${({ theme: { gridUnit } }) => gridUnit / 2}px;
   }
   th.is-sorted svg {
     color: ${({ theme: { colors } }) => colors.grayscale.base};
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 29cc8199ed..85c200689e 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -430,8 +430,15 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                 }}
               />
             ) : null}
-            {label}
-            <SortIcon column={col} />
+            <div
+              css={{
+                display: 'inline-flex',
+                alignItems: 'center',
+              }}
+            >
+              <span>{label}</span>
+              <SortIcon column={col} />
+            </div>
           </th>
         ),
         Footer: totals ? (