• 
      

    Improve spacing and promote help text in form UIs.

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

    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.

    Summary ID
    Improve spacing and promote help text in form UIs.
    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.
    0e6691ccf79a4e52eabec418af164b456352e488

    david
    1. Ship It!
    2. 
        
    chipx86
    Review request changed
    Status:
    Completed
    Change Summary:
    Pushed to release-5.0.x (178be74)