Omnichannel --> Agents --> Edit --> Departments - not user-friendly

Description:

Omnichannel --> Agents --> Edit --> Departments is actually not user friendly, when the agent is set to many departments (like 4 or more).

Steps to reproduce:

1. Go to Omnichannel.
2. Click on Agents.
3. Click on Edit.
4. Departments, select many departments.

Expected behavior:

Adding and Deleting departments happens in an user-friendly interface.

Actual behavior:

I've added screenshots to show why we think it's not user-friendly. It's difficult to read which departments are already added, to add more departments and we could also delete departments by accident.

Server Setup Information:

• Version of Rocket.Chat Server: 4.3.0
• Operating System: Ubuntu
• Deployment Method: docker
• Number of Running Instances: 1
• DB Replicaset Oplog: yes
• NodeJS Version: v12.22.8
• MongoDB Version: 4.0.13

Client Setup Information

• Desktop App or Browser Version: Chrome
• Operating System: Windows

Additional context

Screenshots:

Start by reproducing the issue through Omnichannel → Agents → Edit → Departments with many departments, using the attached screenshots as the reference. Done means the selected departments are easy to read, additional departments can be added, and departments cannot be deleted accidentally.