Mini beautifying the UI: branch rules edition
<!--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=476555)
</details>
<!--IssueSummary end-->
Here is a list of potential issues we would like to address:
1. always show descriptions for "allow to push", "require code owner approval"
- currently they are only show when toggle is on
- **status**: ~"workflow::design" this is still the desired behaviour [as there might have been previous conversations on the topic](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2026502519). [original issue](https://gitlab.com/gitlab-org/gitlab/-/issues/438970) for context
- can be grouped with [The sequence of the toast and the state change of the toggle is not instant](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2034451506) and [Move the top margin from the first protection toggle to be a bottom margin of a Crud component above it](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2080580212)
2. [when there is one option of "branch name or pattern", we could default to a button "Add branch rule" directly](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2034438131)
- **status**: ~"workflow::ready for development"
3. [Put the group scope search first for dropdowns](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2034441413)
- can be grouped with [Clipping of placeholder text in group search in approval drawer](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2034441975)
- **status**: ~"workflow::ready for development"
4. [don't disable the "Save changes" button when there are no changes](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2034447991)
- for "allowed to push and merge" and "allowed to merge" drawer, remove the disable of the button and add a "no change has been made" toast
- **status**: ~"workflow::ready for development"
5. [Do not reload MR approvals on any Branch rule edits](https://gitlab.com/gitlab-org/gitlab/-/issues/477720)
- **status**: ~"workflow::ready for development"
6. [add the headline to the roles checkboxes](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2094298991)
- **status**: ~"workflow::design". do we want to have an icon? if so, which one?
8. [Add a keyboard trap to the drawer, allowing users to get back to the `x` close button easily](https://gitlab.com/gitlab-org/gitlab/-/issues/476555#note_2140982564)
- **status**: ~"workflow::ready for development"
issue