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.