Fix expanded avatars list display in the MR widget
What does this MR do and why?
We recently changed how avatars render in the MR widget by switching from a block to an inline layout. This broke the layout when many users have approved an MR. In this case, the list can be expanded to show the full list, which doesn't play well with an inline layout as the list overflows the widget instead of wrapping as it should.
Changelog entry added as the regression seems to have made it in %15.11: https://gitlab.com/gitlab-org/release/tasks/-/issues/5403
Additional change
During the UX review, we noticed a few more issues in the approval rules widget, we have fixed those as well:
Before | After | |
---|---|---|
Example 1 | ||
Example 2 | ||
Example 2 (exanded) |
Screenshots or screen recordings
Before | After |
---|---|
How to set up and validate locally
- You'll need an MR that many users approved. Optionally, you can run the following script to add all of your GDK's users' approval to an MR:
mr = MergeRequest.find(<id>) # Replace <id> with some merge request's ID User.all.each{ |user| mr.approvals.new(user: user) } mr.save!
- Navigate to the merge request at /:namespace/-/merge_requests/:id`.
- Expand the approvers list in the approvals widget.
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Paul Gascou-Vaillancourt