regression: PatternFly selects are inconsistent again

[garrett]

Explain what happens

We had some kind of regression in form selects again in PatternFly. This is a problem in Cockpit and also upstream in PatternFly.

For example, here's a comparison of text input (which is consistent with custom PF selects) and form selects:

Here's a zoom crop with guides to show how the form select (bottom) doesn't have the proper padding (text input at the top):

Here's the problem with a "form select" in Cockpit, specifically Podman:

And here's a PatternFly select (non-form select) in Machines for comparison:

Here are both together, with (incorrect) form-select from Podman first and (correct) select in Machines, zoomed in, cropped, and with guides to show the differrences, aligned to the leftmost part of the select:

(Note: The rightmost side is correct.)

The solution is to adjust the override for the left padding (padding-inline-start) in PatternFly 5's overrides again, to add 4 more px, for a total of 7px to form-selects (speficially). From the looks of things, it seems that it's not being applied anymore for whatever reason???

Version of Cockpit

No response

Where is the problem in Cockpit?

None

Server operating system

None

Server operating system version

No response

What browsers are you using?

Firefox

System log

[garrett]

I've checked in Chrome, and they're off by a subpixel (rounded up to a pixel, but differ due to the text starting at a different subpixel for whatever rounding reason):

So this fix should only apply to Firefox, not Chrome, unless the fix is consistent across browsers.

This also may indicate a possible regression in Firefox as well. It really depends. If we fix the left padding again and it looks fine everywhere, then we're done. (That is, if it's unspecified currently.)

[garrett]

WebKit (GNOME Web) seems consistent with Chrome.

[garrett]

Here's a place in Cockpit directly that shows the inconsistency ("add bond" modal from Networking, which has inputs, a select for the MAC address, and then the other dropdowns are "form selects"):

Here are two crops from the above screenshot that shows two letters that start with a vertical line (F and M) with guides to show the offset while zoomed in:

(Top is correct; bottom is not.)

This is in Firefox.

[garrett]

The problem still exists in PatternFly 6:

(Top is correct, with a text input, bottom is a "form select". This is in Firefox on PatternFly.org. The difference is 4px again, like the rest.)

[garrett]

OK, this is a weird one. It looks like Firefox had 4px extra which had to be subtracted, so then we had a workaround for that. But then it wasn't applied, and upstream also integrated the workaround. But then when going to change our own workaround, it wasn't being applied as PatternFly changed the DOM so that the select didn't have the class anymore, but used nesting with the class in a wrapper element instead, with a direct descendant with a select instead! 🤯

So there are levels of things that caused this regression all over the place, in Firefox, in PatternFly, and in Cockpit.

I'll send a PR in a little bit which will make this more obvious, as it's probably hard to follow above.