Source code rules - Protected branches refinement
<!--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=357882)
</details>
<!--IssueSummary end-->
### Problem to solve
With Protected branches moving as part of source code rules https://gitlab.com/groups/gitlab-org/-/epics/6351, the [MVC proposal](https://gitlab.com/gitlab-org/gitlab/-/issues/351468) leveraged the existing design to protected branches. Given the new context and the engineering effort to rebuild the UI this might be a good opportunity to look for improvements to the current design.
**Potential improvements**
- Improve visibility of selections (currently hidden behind dropdowns)
- Standardise with [Approvals section](https://gitlab.com/gitlab-org/gitlab/-/issues/357874)
- Table style
- User display
- Edit flow
**Current design**

### Proposal
Improve the Protected branches section
issue