Skip to content

Extra padding on simple form fields leads to inconsistencies #979

@h-m-m

Description

@h-m-m

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:
Screen Shot 2021-06-26 at 10 52 49 AM
(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:
Screen Shot 2021-06-26 at 10 56 55 AM
(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:
Screen Shot 2021-06-26 at 10 49 48 AM

Without padding:
Screen Shot 2021-06-26 at 10 49 57 AM

(thanks @Exbinary and @Connieh1 for feedback and suggestions on this issue)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions