The proposed solution removes the use of flex container so that ellipsis works as expected. There's however a loss in the vertical centering of the badge that I didn't manage to solve. I tried the following in vain:

• keep flex container and use min-width (https://css-tricks.com/flexbox-truncated-text/)
• try centering using different solutions (https://css-tricks.com/centering-css-complete-guide/)

Any suggestions will be welcomed.

The proposed solution removes the use of flex container so that ellipsis works as expected. There's however a loss in the vertical centering of the badge that I didn't manage to solve. I tried the following in vain:

• keep flex container and use min-width (https://css-tricks.com/flexbox-truncated-text/)
• try centering using different solutions (https://css-tricks.com/centering-css-complete-guide/)

Any suggestions will be welcomed.

I think I found a solution by removing the extra div element (unless there are side effects I'm not aware of).

Thanks for the PR!

Thanks for making the changes. While I do agree that this fixes the original issue, this causes some other issues.
For example: when you hover over the stack frame, the whole line moves to the right, and the restart frame button is no longer nicely right aligned

Thanks for making the changes. While I do agree that this fixes the original issue, this causes some other issues.
For example: when you hover over the stack frame, the whole line moves to the right, and the restart frame button is no longer nicely right aligned

I'll take a look and see what can be done.

I think that with the new specificity for the state label, the rulesets will be applied properly.

Thanks! I just tried this out and seems to work just fine.
Thus merging in ☀️