Cms: 3.5: Improve side-by-side field vertical alignment

[evanwarner]

Opinion: side-by-side field alignment isn't optimal when the two fields have a different height.

Example 1: different length labels and only one wraps:

Changing the parent wrapper to have align-items: flex-end makes this nicer:

---

Same thing when only one field has a description:

vs:

[brandonkelly]

Considered that, but I’m not stoked about having the labels at different heights. Also played with moving the instruction text after the input, but that felt like it could lead to confusion, as the wording of the instruction text is currently all written assuming the current placement.

For now I’m going to leave it as-is, and maybe look into aligning the labels, instructions, and inputs together using subgrid once that’s a thing.

[evanwarner]

Yeah, agreed that instructions should stay above the input. I played around with keeping both labels and inputs aligned, but separating the label from the field created a bad cognitive gap:

Leaving it as-is until more thought and feedback has happened is the right choice.

[richhayler]

Could the field instructions be incorporated into a tooltip-style element, i.e. replace the text below the label with a “help/instructions” icon and when hovering over the icon display the instructions as a tooltip?

[brandonkelly]

@richhayler Possible but I think that would be a step in the wrong direction UX-wise.