From 21cd6d294a3c95fa38ed3f521d4e47233ac82a65 Mon Sep 17 00:00:00 2001
From: dblythy <daniel-blyth@live.com.au>
Date: Tue, 13 Sep 2022 11:19:11 +1000
Subject: [PATCH] fix: align column names to the left

---
 .../ColumnsConfiguration/ColumnConfigurationItem.react.js  | 2 +-
 .../ColumnsConfiguration/ColumnConfigurationItem.scss      | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js
index 087e88b385..279beb1926 100644
--- a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js
+++ b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js
@@ -35,7 +35,7 @@ export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible })
         <Icon name={visible ? 'visibility' : 'visibility_off'} width={18} height={18} fill={visible ? 'white' : 'rgba(0,0,0,0.4)'} />
       </div>
       <div className={styles.columnConfigItemName} title={name}>{name}</div>
-      <div className={styles.icon}>
+      <div className={[styles.icon, styles.columnIcon].join(' ')}>
         <Icon name='drag-indicator' width={14} height={14} fill="white" />
       </div>
     </section>
diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss b/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss
index 7622d2e88f..bd0bf9347b 100644
--- a/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss
+++ b/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss
@@ -1,7 +1,6 @@
 .columnConfigItem {
   padding: 8px 10px;
   display: flex;
-  justify-content: space-between;
   border-radius: 5px;
   cursor: grab;
 }
@@ -21,4 +20,10 @@
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 24px;
+}
+
+.columnIcon {
+  width: auto;
+  flex-grow: 1;
+  justify-content: end;
 }
\ No newline at end of file