Change Details

===Background Currently, all input elements in Codex inherit an absolute height of 32px from their parent `cdx-text-input`. {F35262967} 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| | {F35262972} | {F35262977}| ===Goal 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: {F35262996} ===Considerations We might want to still specify 32px as a `min-width`, to ensure that Codex components maintain this base system size in contexts where font size is reduced (e.g. Monobook skin). ===ACs [] The height of Codex input components increases proportionally with font size

===Background Currently, all input elements in Codex inherit an absolute height of 32px from their parent `cdx-text-input`. {F35262967} 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| | {F35262972} | {F35262977}| ===Goal 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: {F35262996} ===Considerations We might want to 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 a system size in contexts where font size is reduced (e.g. Monobook skin). ===ACs [] The height of Codex input components increases proportionally with font size

===Background Currently, all input elements in Codex inherit an absolute height of 32px from their parent `cdx-text-input`. {F35262967} 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| | {F35262972} | {F35262977}| ===Goal 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: {F35262996} ===Considerations We might want to still specify 32px as a `min-width`height` instead. This way, toinputs 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 basea system size in contexts where font size is reduced (e.g. Monobook skin). ===ACs [] The height of Codex input components increases proportionally with font size