The group headers in the OPTIMADE client are not visually distinguished and clickable

[csadorf]

Describe the bug

When using the OPTIMADE client for structure selection, the group headers ("General", "Projects", etc.) are not visually distinguished and clickable.

To Reproduce Steps to reproduce the behavior:

1. In a terminal, run:

   git clone https://github.com/aiidalab/aiidalab-docker-stack
   cd ./aiidalab-docker-stack/
   pip install -r requirements-manage.txt  # for docker-compose and click
   ./manage.py configure --app quantum-espresso==21.10.0b1
   ./manage.py --develop -v up

2. Open the QE app.
3. Select the "OPTIMADE" tab for the structure selection.
4. Select "Materials Cloud" as the provider.
5. Open the list of databases.

https://user-images.githubusercontent.com/1441208/139038845-89c68486-ae06-4ad6-bd50-cba3b022937d.mp4

Version (if known)

• App version: v21.11.0b1

Additional context

This problem is related to the following issues:

• https://github.com/CasperWA/voila-optimade-client/issues/369
• https://github.com/CasperWA/ipywidgets-extended/issues/48 Add any other context about the problem here.

[unkcpz]

I think this needs to be fixed on repo https://github.com/CasperWA/ipywidgets-extended. Will take a look at it.