id	summary	reporter	owner	description	type	status	priority	milestone	component	version	severity	resolution	keywords	cc	focuses
65207	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
// 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
// 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:

{{{
#!css
@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:

{{{
#!css
.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"	enhancement	new	normal	Awaiting Review	General		normal		admin-reskin		ui, administration