fix: column names in data browser menu not left-aligned (#2263)

Author: dblythy

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>

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;
 }