Currently, all input elements in Codex inherit an absolute height of 32px from their parent cdx-text-input.
Using absolute units in this context becomes problematic, since they prevent the components from adjusting when the font size of the browser is increased (e.g. to "Very large" in Chrome, to "24" in Safari – which are default options provided by said browsers). The inputs become too narrow and, in the case of Safari, hardly usable.
|TahS in Chrome's "Very large" font configuration||TahS in Safari's 24px font configuration|
Inputs should scale to display correct proportions and proper spacing around their values. A good example of this would be the current vector 2022/WVUI TypeaheadSearch component:
We might want to still specify 32px as a min-height instead. This way, inputs will be correctly resized thanks to the increase of their relative line height.
Specifying a min-height will also ensure that Codex components maintain this base system size in contexts where font size is reduced (e.g. Monobook skin).
- The height of Codex input components increases proportionally with font size