feat: add editingAlign to EditableTable

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

@@ -127,6 +127,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
     bold,
     width,
     textAlign,
+    editingAlign = textAlign,
     suffix,
     SuffixComponent = TL2,
     textStyle = it => {},
@@ -135,20 +136,24 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
   } = config
 
   const { values } = useFormikContext()
-  const classes = useStyles({ textAlign, size })
+
+  const isEditing = editing && editable
+  const isField = !bypassField
+
+  const classes = useStyles({
+    textAlign: isEditing ? editingAlign : textAlign,
+    size
+  })
 
   const innerProps = {
     fullWidth: true,
     autoFocus: focus,
     size,
     bold,
-    textAlign,
+    textAlign: isEditing ? editingAlign : textAlign,
     ...inputProps
   }
 
-  const isEditing = editing && editable
-  const isField = !bypassField
-
   return (
     <Td
       className={{

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

@@ -155,6 +155,7 @@ const mainFields = currency => [
     display: 'Cash-in',
     width: 169,
     size: 'lg',
+    editingAlign: 'right',
     input: NumberInput,
     suffix: '%',
     inputProps: {
@@ -167,6 +168,7 @@ const mainFields = currency => [
     display: 'Cash-out',
     width: 169,
     size: 'lg',
+    editingAlign: 'right',
     input: NumberInput,
     suffix: '%',
     inputProps: {
@@ -180,6 +182,7 @@ const mainFields = currency => [
     size: 'lg',
     doubleHeader: 'Cash-in only',
     textAlign: 'center',
+    editingAlign: 'right',
     input: NumberInput,
     suffix: currency,
     inputProps: {
@@ -193,6 +196,7 @@ const mainFields = currency => [
     size: 'lg',
     doubleHeader: 'Cash-in only',
     textAlign: 'center',
+    editingAlign: 'right',
     input: NumberInput,
     suffix: currency,
     inputProps: {