Improve component overlay

Scenario

1. Add a component or edit a component parametre
2. Login with another user and go to page with the changed component
3. Toggle on both overlays: component and content

Problem

The 'content' dial button hovers over the 'lock' icon; you can no longer see it

Solution (see attached designs)

When the component overlay is toggled 'on':

• The 'lock' icon and text (which appears on hover) is removed from the top-right of the container
• The 'lock' icon and container name (in grey) is added to the left-corner of the container (above the container)
  • If a user hovers over the lock icon the container name text disappears and is replaced by 'Locked by [userid]'
• Component names are displayed (in blue) at the top-left of the component and within the container boundary. An experiment 'flask' icon is shown beside the component name IF an experiment is running on the component
  • If a user hovers over the experiment flask icon the component name text disappears and is replaced by the experiment status (created, running or completed)

NOTE: in this new solution the 'lock' and experiment 'flask' icons are smaller so that height of the blue/grey rectangle is the same height for components /containers with and without an icon