fix: orderedBy wrapping in table header

new-lamassu-admin/src/components/editableTable/Header.js

@@ -1,3 +1,5 @@
+import { makeStyles } from '@material-ui/core'
+import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
 
@@ -11,6 +13,14 @@ import { startCase } from 'src/utils/string'
 
 import TableCtx from './Context'
 
+const styles = {
+  orderedBySpan: {
+    whiteSpace: 'nowrap'
+  }
+}
+
+const useStyles = makeStyles(styles)
+
 const groupSecondHeader = elements => {
   const [toSHeader, noSHeader] = R.partition(R.has('doubleHeader'))(elements)
 
@@ -31,6 +41,7 @@ const groupSecondHeader = elements => {
 }
 
 const Header = () => {
+  const classes = useStyles()
   const {
     elements,
     enableEdit,
@@ -61,12 +72,41 @@ const Header = () => {
   const mapElement = (
     { name, width = DEFAULT_COL_SIZE, header, textAlign },
     idx
-  ) => (
-    <Td header key={idx} width={width} textAlign={textAlign}>
-      {header || startCase(name)}{' '}
-      {!R.isNil(orderedBy) && R.equals(name, orderedBy.code) && '-'}
-    </Td>
-  )
+  ) => {
+    const orderClasses = classnames({
+      [classes.orderedBySpan]:
+        R.isNil(header) && !R.isNil(orderedBy) && R.equals(name, orderedBy.code)
+    })
+
+    const attachOrderedByToComplexHeader = header => {
+      const cloneHeader = R.clone(header)
+      const children = R.path(['props', 'children'], cloneHeader)
+      const spanChild = R.find(it => R.equals(it.type, 'span'), children)
+
+      if (!R.isNil(orderedBy) && R.equals(name, orderedBy.code)) {
+        try {
+          spanChild.props.children = R.append(' -', spanChild.props.children)
+          return cloneHeader
+        } catch (e) {
+          return header
+        }
+      }
+      return header
+    }
+
+    return (
+      <Td header key={idx} width={width} textAlign={textAlign}>
+        {!R.isNil(header) ? (
+          <>{attachOrderedByToComplexHeader(header) ?? header}</>
+        ) : (
+          <span className={orderClasses}>
+            {startCase(name)}{' '}
+            {!R.isNil(orderedBy) && R.equals(name, orderedBy.code) && '-'}
+          </span>
+        )}
+      </Td>
+    )
+  }
 
   const [innerElements, HeaderElement] = groupSecondHeader(elements)
 

new-lamassu-admin/src/pages/Commissions/helper.js

@@ -23,7 +23,7 @@ const ALL_COINS = {
   code: 'ALL_COINS'
 }
 
-const cashInAndOutHeaderStyle = { marginLeft: 6 }
+const cashInAndOutHeaderStyle = { marginLeft: 6, whiteSpace: 'nowrap' }
 
 const cashInHeader = (
   <div>
@@ -487,8 +487,8 @@ const getListCommissionsFields = (getData, currency, defaults) => {
     },
     {
       name: 'cryptoCurrencies',
-      display: 'Crypto Currency',
-      width: 265,
+      display: 'Crypto Currencydasdsa',
+      width: 255,
       view: R.prop(0),
       size: 'sm',
       editable: false
@@ -510,7 +510,7 @@ const getListCommissionsFields = (getData, currency, defaults) => {
       header: cashOutHeader,
       name: 'cashOut',
       display: 'Cash-out',
-      width: 130,
+      width: 140,
       input: NumberInput,
       textAlign: 'right',
       greenText: true,