Customize: Account for media queries in l10n.css

[swissspidy]

Noticed while working on #40271 / #40152.

wp-admin/css/l10n.css contains some locale-specific CSS adjustments, some of them for the customizer. For example:

.locale-de-de #customize-header-actions .button {
	padding: 0 5px 1px; /* default 0 10px 1px */
}

Now, that default is correct — as long as you are not using the Customizer on a smaller device. There, the default padding is 6px 14px, not 0 10px 1px.

On an iPhone 6, that de_DE specific CSS looks like this:

As you can see, there's a clear lack of top and bottom padding.

[westonruter]

@swissspidy is this because in de_DE the “Save & Publish” text spans two lines? Why is “Save & Publish” showing with the de_DE locale active?

[swissspidy]

Why is “Save & Publish” showing with the de_DE locale active?

That's fixed in #40271. But it also happens when the text is in de_DE and the de_DE body class is applied.

is this because in de_DE the “Save & Publish” text spans two lines?

Nope, it doesn't. At least not on mobile.

Here are some screenshots:

iPhone 6 screen size:

iPhone 5 screen size: