Improved layout of the invite member modal component
-
Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you receive complimentary access to GitLab Duo.
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) |
![]() |
![]() |
sm (>=576px) |
![]() |
![]() |
md (>=768px) |
![]() |
![]() |
lg (>=992px) |
![]() |
![]() |
xl (>=1200px) |
![]() |
![]() |
How to set up and validate locally
- Go to the members page of a project or group
- Try to add a member
- 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









