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

1. 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!

2. Navigate to the merge request at /:namespace/-/merge_requests/:id`.
3. 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.

assigned to @pgascouvaillancourt

added frontend label

	1 Warning
	This merge request changed undocumented Vue components in vue_shared/. Please consider creating Stories for these components: app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
frontend	Deepika Guliani (@deepika.guliani) (UTC+5.5, 9.5 hours ahead of @pgascouvaillancourt)	Savas Vedova (@svedova) (UTC+3, 7 hours ahead of @pgascouvaillancourt)

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

marked the checklist item I have evaluated the MR acceptance checklist for this MR. as completed

removed frontend label

@pgascouvaillancourt - please see the following guidance and update this merge request.

	1 Error
	Please add typebug typefeature, or typemaintenance label to this merge request.

added 9 commits

• e4084239...9c7bdc9b - 8 commits from branch master
• fd45fc87 - Fix expanded avatars list display in the MR widget

Compare with previous version

changed the description

added frontend groupfoundations regression:15.11 labels

changed milestone to %16.0

added devopsmanage sectiondev labels

added bugux label

added typebug label

mentioned in merge request !116910 (merged)

resolved all threads

@anna_vovchenko since you reviewed the previous fix, I was hoping that you could give this the initial review to make sure I did not miss anything

requested review from @anna_vovchenko

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits b31feea6 and 64a27608

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.64 MB	3.64 MB	-	0.0 %
mainChunk	2.08 MB	2.08 MB	-	0.0 %

---

Note: We do not have exact data for b31feea6. So we have used data from: 8fae84e5.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

added 1 commit

• 64a27608 - Fix expanded avatars list display in the MR widget

Compare with previous version

resolved all threads

Allure report

allure-report-publisher generated test report!

e2e-review-qa: test report for c2045264

expand test summary

+-----------------------------------------------------------------------+
|                            suites summary                             |
+------------------+--------+--------+---------+-------+-------+--------+
|                  | passed | failed | skipped | flaky | total | result |
+------------------+--------+--------+---------+-------+-------+--------+
| Verify           | 10     | 0      | 0       | 0     | 10    | ✅     |
| Create           | 28     | 0      | 1       | 0     | 29    | ✅     |
| Plan             | 49     | 0      | 1       | 0     | 50    | ✅     |
| Manage           | 8      | 0      | 3       | 0     | 11    | ✅     |
| Govern           | 24     | 0      | 0       | 0     | 24    | ✅     |
| Framework sanity | 9      | 0      | 1       | 0     | 10    | ✅     |
| Package          | 0      | 0      | 1       | 0     | 1     | ➖     |
| Data Stores      | 22     | 0      | 0       | 0     | 22    | ✅     |
| Monitor          | 4      | 0      | 0       | 0     | 4     | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+
| Total            | 154    | 0      | 7       | 0     | 161   | ✅     |
+------------------+--------+--------+---------+-------+-------+--------+

added regression label

added 1 commit

• 17e03015 - Only set padding when list is expanded

Compare with previous version

	1 Warning
	This merge request changed undocumented Vue components in vue_shared/. Please consider creating Stories for these components: app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue

Reviewer roulette

Changes that require review have been detected!

Please refer to the table below for assigning reviewers and maintainers suggested by Danger in the specified category:

Category	Reviewer	Maintainer
frontend	Rudy Crespo (@rcrespo3) (UTC-4, same timezone as @pgascouvaillancourt)	Tristan Read (@tristan.read) (UTC+12, 16 hours ahead of @pgascouvaillancourt)
UX	Katie Macoy (@katiemacoy) (UTC-5, 1 hour behind @pgascouvaillancourt)	Maintainer review is optional for UX

To spread load more evenly across eligible reviewers, Danger has picked a candidate for each review slot, based on their timezone. Feel free to override these selections if you think someone else would be better-suited or use the GitLab Review Workload Dashboard to find other available reviewers.

To read more on how to use the reviewer roulette, please take a look at the Engineering workflow and code review guidelines. Please consider assigning a reviewer or maintainer who is a domain expert in the area of the merge request.

Once you've decided who will review this merge request, assign them as a reviewer! Danger does not automatically notify them for you.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

added UX label

Please wait for Reviewer Roulette to suggest a designer for UX review, and then assign them as Reviewer. This helps evenly distribute reviews across UX.

This message was generated automatically. You're welcome to improve it.

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits fb895fc0 and c2045264

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	3.69 MB	3.69 MB	-	0.0 %
mainChunk	2.16 MB	2.16 MB	-	0.0 %

---

Note: We do not have exact data for fb895fc0. So we have used data from: 480c83f6.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

requested review from @katiemacoy

changed the description

non-blocking

outside the scope of this MR (I think?) but the all eligible users suffers for the avatars overflowing out of their bounding box at narrow viewports. cc @pgascouvaillancourt

approved this merge request

removed review request for @katiemacoy

@katiemacoy, thanks for approving this merge request.

This is the first time the merge request is approved. To ensure full test coverage, a new pipeline will be started shortly.

For more info, please refer to the following links:

• rspec predictive jobs
• jest predictive jobs
• merging a merge request.

added pipeline:mr-approved label

added 2 commits

• 902f3e4b - Fix approval rules display on mobile
• 02bd10cd - Do not attempt to render eligible approvers if there aren't any

Compare with previous version

changed the description

added 563 commits

• 02bd10cd...d9bf9d1b - 559 commits from branch master
• 318617e3 - Fix expanded avatars list display in the MR widget
• 2130c0b8 - Only set padding when list is expanded
• e691a59f - Fix approval rules display on mobile
• 2d7f8b97 - Do not attempt to render eligible approvers if there aren't any

Compare with previous version

@anna_vovchenko I pushed a few changes based on Katie's findings, so this might require a re-review when you have a moment

approved this merge request

removed review request for @anna_vovchenko

added 12 commits

• 2d7f8b97...1bca626f - 8 commits from branch master
• 7eb772b1 - Fix expanded avatars list display in the MR widget
• 41bdb109 - Only set padding when list is expanded
• 7a585f79 - Fix approval rules display on mobile
• c2045264 - Do not attempt to render eligible approvers if there aren't any

Compare with previous version

@iamphill I think this touches one of your areas of expertise Could you maintainerize please?

requested review from @iamphill

approved this merge request

resolved all threads

enabled an automatic merge when the pipeline for 429341c8 succeeds

merged