Improved layout of the invite member modal component

What does this MR do and why?

This MR improves the layout of the invite member modal component where the maximum role and expiration date fields were only using half of the modal's width. It was noticeable because the help text for the maximum role's field was wrapping too early 🙂

References

N.A.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Viewport size Before After
xs (<576px) master_xs fix_xs
sm (>=576px) master_sm fix_sm
md (>=768px) master_md fix_md
lg (>=992px) master_lg fix_lg
xl (>=1200px) master_xl fix_xl

How to set up and validate locally

  1. Go to the members page of a project or group
  2. Try to add a member
  3. Ensure that the role selector and expiration date fields have the same size, not spanning the full width of the modal, whilst their help text span over the full width of the modal
Edited by Marco Zille

Merge request reports

Loading