Use ex instead of ch for better browser consistency

[SiAdcock]

What is the purpose of this change?

Text input fields use the ch unit to set the width based on expected character length.

We have noticed that fields look narrower in IE11 due to the way IE11 calculates the width of 1ch. According to CanIUse:

IE supports the ch unit, but unlike other browsers its width is that specifically of the "0" glyph, not its surrounding space. As a result, 3ch for example is shorter than the width of the string "000" in IE.

The ex unit appears more consistent across browsers. Using this would mean we would not be able to map the expected character length to the actual width of the field.

GOV.UK uses the ex unit for their fixed width text inputs.

What does this change?

• Use ex instead of ch to declare text input widths

Screenshots

Before IE11

Before Safari

After IE11

After Safari

Checklist

Accessibility

• Tested with screen reader
• Navigable with keyboard
• Colour contrast passed
• The component doesn't use only colour to convey meaning

Cross browser and device testing

• Tested with touch screen device

Responsiveness

• Tested at all breakpoints
• Tested with with long text
• Stretched to fill a wide container