<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=239256) </details> <!--IssueSummary end--> ### Description Refactor `approvals_list.vue` so two layouts can be handled separately. - `ee/app/assets/javascripts/vue_merge_request_widget/components/approvals/approvals_list.vue` ### Original Discussion The following discussion from !39753 should be addressed: - [ ] @mrincon started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39753#note_399232104): (+1 comment) > **Comment (non-blocking):** I'll confess I found this component hard to read. It contains 2 sections (**Approvers** and **Codeowners**) which require slightly different layouts (one has files patterns, others not) and yet the data and layout is mixed in the same place. > > I would hope for them to eventually to be refactored to 2 separate components, for the rule's description: > > | approvers rule description | codeowners rule description | > | ------ | ------ | > |  |  | > > Or maybe even the entire row, if that makes sense.