Improve spacing and promote help text in form UIs.

Review Request #12780 — Created Jan. 11, 2023 and submitted — Latest diff uploaded

Information

Review Board
release-5.0.x

Reviewers

Our admin UI forms can sometimes get a bit cluttered, with fields,
labels, help text, and action buttons blurring together at times. This
was particularly an issue on mobile.

To help avoid this, this change tweaks some of the spacing and visual
hints of the forms.

There's now double the vertical space between fields, helping
differentiate fields.

Spacing for fieldsets have been tweaked accordingly, providing more
consistent spacing for fieldsets with/without descriptions or other
content, just to keep everything even regardless of content.

Action buttons have spacing above it, making it harder to hit them when
trying to click/tap a field.

The icon for help text is now a bit larger and uses the solid variant of
the FontAwesome icon, helping to keep the ? visible on all displays.
It's also a light blue, helping visually distinguish it from labels or
other field/fieldset content.

Tested various admin UI settings and model change forms, looking for any
regressions in visuals. Tested this in both desktop and mobile.

Verified this solved some messy UI in an upcoming change I'm working on.


Commits

Files

    Loading...