Improve alignment of settings widgets

[jsoref]

At some point, the default layout for various widgets input/textarea/label may have changed a bit. But at least in modern time, the behavior of input-type=checkbox w/ label as rendered w/ the jenkins styles is pretty bad, and the use of td{vertical-align:top} makes for a pretty ugly outcome when a setting interacts with an input.

Before

After

Proposed changelog entries

• Entry 1: Improve alignment of form widgets with labels

Submitter checklist

• JIRA issue is well described
• Changelog entry appropriate for the audience affected by the change (users or developer, depending on the change). Examples
  * Use the Internal: prefix if the change has no user-visible impact (API, test frameworks, etc.)

Desired reviewers

[daniel-beck]

The problem here is that very high fields will have their label centered vertically, way down. What happens in the example once you have 20 API tokens?

[jsoref]

Here's what it looks like today (note: I randomly selected a number of tokens, 11 total by clicking the add button 10 times):

Here's what that part would look like with the change:

And that same set from the top of the section:

And from the top of the page:

In some ways, it would have to be twice as many items as shown in this view before middle would actually be worse than top.

This is partially because there aren't too many sections above API Token. Admittedly, the rule would apply to other things as well. I'm not sure it's a huge concern, if you're coming from the top, there will probably be a section header, like API Token. It's true that eventually it would be offscreen, but, as shown in the first screen, that's actually pretty easy to achieve today.

[oleg-nenashev]

LGTM

[Wadeck]

+) the text area is closer to the sliding stuff at its bottom
-) the middle alignement is bad from my PoV. I don't remember having seen such behavior before and so, as a user, what I am not used to, is bad for my quick / "natural" understanding.

So it's a -1 from me.

[oleg-nenashev]

@Wadeck if you vote -1, could you please request changes next time so that it does not get missed?

[Wadeck]

See comments above

[jsoref]

Fwiw, I think the layout used here (labels on the left of another cell) is not commonly used in most of the world.

Most things just use section headings...
(For one, section headings don't eat horizontal real-estate and thus do less harm for mobile displays.)

Would people be open to me redoing all of these things to delete the left column and transition the items to (effectively) <th> like things above the corresponding rows?

Here's Windows 10 Settings > Wi-Fi > Manage known networks:

Here's Windows 10 Feedback Hub Add new feedback:

Beyond that: how often do you run into a case where this edge matters much?
For the 1-3 item case, it's going to be closer to a natural feel. In the 1 item case, the positioning will be better than what we have today.

And, out of curiosity how many places can you point to where this matters? The token case is afaik a fairly obscure case which I doubt many people use (and certainly expect they wouldn't use for more than a handful of tokens, although I welcome evidence).

[Wadeck]

@jsoref

Would people be open to me redoing all of these things to delete the left column and transition the items to (effectively) like things above the corresponding rows?

Please proceed!

I am opposed to the vertical middle alignment when we are using the two columns "design", because it's bad for the reader "flow". As you say, the edge cases are perhaps not numerous, but I just don't understand the goal to do something that is not better for common cases and worse for some corner cases.

If the only purpose is to have the labels on the left aligned with the middle of the one-liner inputs, in that case, I can only propose to add a padding top so that the alignment is good for 95% of the cases and for text-area, there is no issue.

[daniel-beck]

@jsoref

Regarding your response to,

The problem here is that very high fields will have their label centered vertically, way down. What happens in the example once you have 20 API tokens?

I'd like to note that you start the page at the top. In a vertically long section as the one with the API tokens, it'd take some additional scrolling to actually see the vertically centered label when you start from the top. That seems like a bigger deal than not seeing it when further down -- you've already seen it.

[daniel-beck]

@jsoref

Would people be open to me redoing all of these things to delete the left column and transition the items

Seems like a reasonable idea (a lot of space is wasted due to -- sometimes nested -- label columns), although you should be prepared to encounter massive problems in this endeavor. We can't really overhaul the form structure of nested tables due to https://wiki.jenkins.io/display/JENKINS/Structured+Form+Submission, and plugins sometimes build their own UI elements with the assumption that the structure looks like it currently does.

While it should be relatively possible to change the core UI, Jenkins will need to continue working reasonably well with most plugins, and certainly all popular plugins.

This is easily JEP/SIG levels of difficulty and effort.

[alecharp]

@jsoref would you like to keep this PR open or do you need to have #3895 merged before?

[jsoref]

This is an independent change.

I'm on vacation this week.

[alecharp]

@jsoref would you have time to work on this?

[jsoref]

@alecharp: I'm not sure what people want me to do.

[rsandell]

I'm also -1 on the middle align.

@jsoref I suggest bringing this up in a UX SIG meeting so that this type of work can be coordinated better.

[MRamonLeon]

I'm with @Wadeck here, I see more natural having it at the top, to see it rapidly. I think this change is controversial, maybe not having the left column is better but it's a bigger change. So my proposal is to close this PR.

[fcojfernandez]

@alecharp: I'm not sure what people want me to do.

I think there is no consensus here, so I would recommend you to open a proposal in the mailing list, @jsoref. If you agree with that I will change the proposed-for-close label into a stalled label.

Here my opinion as well:

1. For me, it's more natural to have the upper alignment, but not a strong opinion
2. What actually concerns me is that this change in the css might impact other components. Have you checked?