[PROD] Contact list styling

[mmusori]

Issue

On the specific emergency page under contacts, the 3rd column has a different formatting to the other columns. see image below

Steps to reproduce

Please check : https://go.ifrc.org/emergencies/6479
to see the problem.

If applicable, add screenshots to help explain your problem.

Expected behaviour

The 3rd column should have the same format as the second column.

[szabozoltan69]

Somehow the frontend seems to "restructure" the data. E.g this is in Admin:

And from that, on frontpage there is I F R C ... C A R, as if all capital letter would gain a space before it. ???

[tovari]

@frozenhelium, would you mind to check this issue?

[szabozoltan69]

@batpad has found this: https://github.com/IFRCGo/go-frontend/blame/develop/src/root/components/contact-row.js#L15 – that is the root cause.
I suppose it was copied from another part of code, because "separate(" can be found in 3 places:

views/field-report.js:            <p className='form__label'>{separate(d.ctype)}</p>
components/admin-area-elements.js:                <td>{separate(o.ctype)}</td>
components/contact-row.js:      <td>{separate(contact.ctype)}</td>

So it seems to be an unintentional effect.

separate:

export const separateUppercaseWords = (x) => {
  if (typeof x !== 'string') {
    return nope;
  }
  return x.replace(/([A-Z])/g, ' $1').trim();
};

[szabozoltan69]

Deployed to Prod.
Now it is nice, without surplus spaces: https://go.ifrc.org/emergencies/6479