Description
The components ZObjectSelector, WlSelect and WlTextInput exhibit a style behavior when fitWidth=true by which their width is fitted to the content when unfocused and expands to 100% of the horizontal space when focused.
When calculating the field width when fitted, we need to do this using ch. However, the font is not a monospace but a fitted font, which means that the size does not regularly correspond to the number of characters. This means that when the content has less characters, the field is more adjusted to the content and the longer the text is, the more blank space there is.
We remove a 10% of the calculated space, but it's still not very well fitted.
Some references:
> 1ch is usually wider than the average character width, usually by around 20-30%
Refs:
https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input
https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/
Desired behavior/Acceptance criteria
- ...
Devices and Design (URLs or screenshots)
- Desktop: ...
- Small screens/mobile: ...
Completion checklist
- Before closing this task, review one by one the checklist available here: https://www.mediawiki.org/wiki/Abstract_Wikipedia_team/Definition_of_Done#Front-end_Task/Bug_Completion_Checklist