• 
      

    Improve styling for all authentication-related form pages.

    Review Request #14349 — Created Feb. 17, 2025 and submitted — Latest diff uploaded

    Information

    Review Board
    release-7.1.x

    Reviewers

    Our auth-related pages that include forms (such as the login page,
    registration, Forget Password, and others) try to achieve a clean visual
    style where the fields are centered and the labels are to the left of
    the fields. This was done using some fixed widths and some margin
    offsets, and didn't always translate well when additional content was
    injected onto a page.

    This change redoes the styling to get rid of the hacks and instead
    utilize flexbox and CSS grid to get our balanced look without
    hard-coding much of anything, and without needing much in the way of
    style overrides specific to new content on the page. This makes these
    pages easier to maintain and extend, which is important for some
    in-progress work.

    These also achieve a better mobile look, with fields providing more
    space for entry on smaller screens without compromising layout or
    introducing unwanted padding.

    In the process, a regression in error styling has been fixed (it was
    lacking a color hint) and buttons have been updated to use Ink.

    The styling all applies to the somewhat legacy auth-* CSS classes, to
    maintain compatibility. Rebuilding these for a CSS Component scheme is
    out of scope, and best suited for a future version of Ink.

    Tested the login page with/without SSO and a captcha.

    Tested the registration page.

    Tested the SSO login flow and account linking.

    Tested the Forget Password flow.

    Tested with in-progress code building upon these forms.

    All tests were conducted with desktop and mobile modes at various
    widths and wrap levels.


    Commits

    Files