On various form pages, 2 ems of padding combined with inline-flex leads to squished-looking inputs at smaller breakpoints with a bunch of space off the the side unused. Also, at small enough mobile breakpoints, it'd be good for these fields to stack instead of remaining side-by-side.
With padding:
(also the asterisk denoting "required" gets orphaned at the end of a line break)
Removing the padding without any other changes isn't great, though:
(this screenshot taken at the same window width as the first screenshot — notice that it uses extra width on the right)
We also use that padding on the admin community resource page to give it nice looking columns, so this padding isn't something we can remove without making adjustments wherever it's used.
With padding:
Without padding:
(thanks @exbinary and @Connieh1 for feedback and suggestions on this issue)
h-m-m
commented
3 years ago
On various form pages, 2 ems of padding combined with inline-flex leads to squished-looking inputs at smaller breakpoints with a bunch of space off the the side unused. Also, at small enough mobile breakpoints, it'd be good for these fields to stack instead of remaining side-by-side.
With padding:
(also the asterisk denoting "required" gets orphaned at the end of a line break)
Removing the padding without any other changes isn't great, though:
(this screenshot taken at the same window width as the first screenshot — notice that it uses extra width on the right)
We also use that padding on the admin community resource page to give it nice looking columns, so this padding isn't something we can remove without making adjustments wherever it's used.
With padding:
Without padding:
(thanks @exbinary and @Connieh1 for feedback and suggestions on this issue)