Introduce utility class to handle 32px form elements on mobile layouts

[wildworks]

Form element sizes are basically 40px, but 32px is used in some places.

// CSS specificity: 0,2,1
.selector input[type="search"] {
        min-height: 32px;
}

On mobile layouts, the following style expects all form elements to be 40px:

// CSS specificity: 0,1,1 
@media screen and (max-width: 782px) {
        input[type="search"] {
                min-height: 40px;
        }
}

However, this has lower specificity than the CSS above, so it doesn't apply. As a result, an individual override style like the following is required for mobile layouts:

@media screen and (max-width: 782px) {
        .selector input[type="search"] {
                min-height: 40px;
        }
}

This is very easy to overlook, and as reported in #64999, mobile layout styles are sometimes missing.

To solve these issues, I propose adding a new utility class, like form-compact, for cases where 32px form elements are needed. For example:

.form-compact {
        min-height: 32px;
}
@media screen and (max-width: 782px) {
        .form-compact {
                min-height: 40px;
        }
}

A similar utility class .button-compact exists for buttons.

cc @sabernhardt @fabiankaegy @joedolson

[joedolson]

This makes sense to me. A utility class can help centralize sizing so that we can make all of this more consistent.