The various input fields (or emulated input fields that are draft-js instances) have inconsistent padding:
The design feedback is to standardize to 8 pixels to match the Yoast grid size. For input fields this means 8 pixels for both vertical and horizontal padding. Instead, textareas would probably need a padding: 4px 8px.
Not so simple as it looks at first sight as:
draft-js instances need padding on the wrapper <div> but then the inner <input> need to reset padding to 0 and adjust the line height
there's the need to always set on out fields some CSS properties that do affect the height, for example font size and line height
all the inputs should have the same height both in the metabox and in the Gutenberg sidebar
Noticed while looking at https://github.com/Yoast/yoast-components/pull/703
The various input fields (or emulated input fields that are draft-js instances) have inconsistent padding:
The design feedback is to standardize to 8 pixels to match the Yoast grid size. For input fields this means 8 pixels for both vertical and horizontal padding. Instead, textareas would probably need a
padding: 4px 8px.Not so simple as it looks at first sight as:
<div>but then the inner<input>need to reset padding to 0 and adjust the line height