Skip to content

Convert email badges to a list

Eduardo Sanz García requested to merge eduardosanz/emails-labels-to-list into master

What does this MR do and why?

Convert email badges to a list

In the user email preferences page, the email badges were floated to the right, except the first badge (Verified/Unverified). On narrow viewports that caused an unusual vertical and horizontal alignment.

I have resolved this misalignment by:

  • converting the badges into a list (except the first badge, Verified/Unverified)
  • the delete and Resend confimation email are aligned to the right using a CSS flex. That allows for a better vertical spacing when the items are wrapped. The wrapping is in reverse order to match other parts of the application and to not disassociate the email from the list.

Closes #365450 (closed)

Screenshots or screen recordings

Before

Emails___User_Settings___GitLab

After

Emails___User_Settings___GitLab__1_

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Go to Profile > Preferences
  2. On the left-side menu click Emails

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports