Fix layer headers layout

[Dagobert42]

URL of deployed dev instance (used for testing):

• https://___.webknossos.xyz

Steps to test:

• create layers with longer names

Issues:

• fixes Ensure layer headers look good even with long names #6008 and Long layer names don't wrap properly in sidebar #5627

---

• [✓] Ready for review

[Dagobert42]

Here's what it currently looks like:

Two open questions:

1. The EditableTextLabel made for awkward break behaviour so I moved the edit button into the same span as the label. Could this break the UI in other places? (I briefly checked the spots I found when searching EditableTextLabel and they appeared to be fine.) Nonetheless, the edit button can still appear out of place as can be seen above so maybe there's a better solution.
2. Is there a better place to add the css rules?

[philippotto]

Awesome! Major improvement 👍

The EditableTextLabel made for awkward break behaviour so I moved the edit button into the same span as the label. Could this break the UI in other places?

I think, the description here looks weird now:

Nonetheless, the edit button can still appear out of place as can be seen above so maybe there's a better solution.

You might have success with the approach (a) from here: https://codepen.io/snookca/pen/JBdBVZ
But if it takes longer than 15 minutes, I'd skip it for now :)

[Dagobert42]

The latest changes to EditableTextLabel also have an impact on TextWithDescription. This leads to changes in the annotations dashboard. However, I'd say that the break-word behaviour there wasn't optimal in the first place:

Before:

After:

I've opened up #6092 to deal with that.

[philippotto]

Great, I think, this can be merged :) Preferably, on Monday, as we usually try to not push to master on Fridays.

[Dagobert42]

Thanks! Will merge on monday :)